Javascript, Vue JS displaying values

vue list component
vue data array
vue push to array
vue js find value in array
vue component
v-bind
vue lifecycle
vue computed

Beginner here I am having some issues displaying data using Vue js.

I have 3 arrays. I would like to display, Array 1 value[0] and than Array 2 value[0] and than Array 3 value[0]

Arrays example:

tableDataSlackStart [ "2017-10-24T03:15:36Z", "2017-10-24T09:13:44Z", "2017-10-24T15:41:27Z"]
tableDataCurrentTurning [ "2017-10-24T03:15:36Z", "2017-10-24T09:13:44Z", "2017-10-24T15:41:27Z"]
tableDataSlackStop [ "2017-10-24T03:15:36Z", "2017-10-24T09:13:44Z", "2017-10-24T15:41:27Z"]

Show date

<div class="stuff">
        <div class="start">{{tableDataSlackStart}}</div>
        <div class="turn">{{tableDataCurrentTurning}}</div>
        <div class="stop">{{tableDataSlackStop}}</div>
</div>

At the moment i get the complete array in each div.

I want the data to display something like this.

    <div class="stuff">
        <div class="start">{{tableDataSlackStart[0]}}</div>
        <div class="turn">{{tableDataCurrentTurning[0]}}</div>
        <div class="stop">{{tableDataSlackStop[0]}}</div>
</div>
<div class="stuff">
        <div class="start">{{tableDataSlackStart[1]}}</div>
        <div class="turn">{{tableDataCurrentTurning[1]}}</div>
        <div class="stop">{{tableDataSlackStop[1]}}</div>
</div>

I don't know how to achieve it, with out duplicating the code.

Any help would be appreciated.

For this, I would format the data differently:

tableData: [{
        slackStart: '',
        currentTurning: '',
        slackStop: ''
    }, {
        slackStart: '',
        currentTurning: '',
        slackStop: ''
    }, {
        slackStart: '',
        currentTurning: '',
        slackStop: ''
    }]

to format the data, you could do something like this

tableData = tableDataSlackStart.map(function (value, key) {
    return {
        slackStart: value,
        currentTurning: tableDataCurrentTurning[key] || "no Data",
        slackStop: tableDataSlackStop[key] || "no Data"
    };
});

this will only work properly if the arrays are all the same length and the SlackStart has the most number of entries.

This would enable you to do something like so:

<div v-for="data in tableData">
    <div class="start">{{ data.slackStart }}</div>
    <div class="turn">{{ data.currentTurning }}</div>
    <div class="stop">{{ data.slackStop }}</div>
</div>

If you can provide more information about how you are using Vue, I can give more guidance.

Template Syntax, The mustache tag will be replaced with the value of the msg property on the Directive attribute values are expected to be a single JavaScript expression (with​  Due to limitations in JavaScript, Vue cannot detect the following changes to an array: When you directly set an item with the index, e.g. vm.items[indexOfItem] = newValue. When you modify the length of the array, e.g. vm.items.length = newLength.

ff their lengths are as same, you can code like this:

<div v-for="(data, index) in tableDataSlackStart" :key="index">
<div class="stop">{{ data }}</div>
<div class="start">{{ tableDataCurrentTurning[index] }}</div>
<div class="turn">{{ tableDataSlackStop[index] }}</div>

List Rendering, <ul id="v-for-object" class="demo"> <li v-for="value in object"> {{ value }} </li> </ul​> is not guaranteed to be consistent across JavaScript engine implementations​. Sometimes we want to display a filtered or sorted version of an array without  JavaScript Display Possibilities. JavaScript can "display" data in different ways: Writing into an HTML element, using innerHTML. Writing into the HTML output using document.write(). Writing into an alert box, using window.alert(). Writing into the browser console, using console.log().

You can easily do that by arranging your data like

var tableDataSlackStart = [ "2017-10-24T03:15:36Z", "2017-10-24T09:13:44Z", "2017-10-24T15:41:27Z"] 

var tableDataCurrentTurning = [ "2017-10-24T03:15:36Z", "2017-10-24T09:13:44Z", "2017-10-24T15:41:27Z"]

var tableDataSlackStop = [ "2017-10-24T03:15:36Z", "2017-10-24T09:13:44Z", "2017-10-24T15:41:27Z"]

 var arr = [
        tableDataSlackStart,
        tableDataCurrentTurning,
        tableDataSlackStop
      ];

  arr.forEach(data => console.log(data[0]));

How to Use Vue.js and Axios to Display Data from an API , Vue.js is a front-end JavaScript framework for building user interfaces. In this example, our data model contains a single key-value pair that  Display unescaped HTML in Vue.js. javascript html vue.js. You have to use v-html directive for displaying html content inside a vue component

How to display value of objects in vue.js 2?, The list is an object, with the keys being the different element id's - you are currently trying to access like this: this.$store.state.product.list.id.name. You are  vue-object-view. Vue.js component for displaying arbitrary JavaScript values (supporting circular references) See the live demo to try it out. (demo app on github) About. The main purpose of this component is to display complex JavaScript values that may contain circular references.

Display Data with Vue.js, Here is the first lesson on Vue.js shows how to use Vue objects. To get started all you need to do is include the following JavaScript. Then it has a data property which has a message key with a value Hello World. With the  A JavaScript Boolean represents one of two values: true or false. Very often, in programming, you will need a data type that can only have one of two values, like. For this, JavaScript has a Boolean data type. It can only take the values true or false. The Boolean () Function. You can use the Boolean () function to find out if an expression (or

Displaying a simple list using data and props in VueJS, Displaying a simple list using data and props in VueJS. VueJsJavaScriptWeb FrameworkCommunityCreator. In the first two shots of this series, I wrote about  Class and Style Bindings. A common need for data binding is manipulating an element’s class list and its inline styles. Since they are both attributes, we can use v-bind to handle them: we only need to calculate a final string with our expressions. However, meddling with string concatenation is annoying and error-prone.

Comments
  • How are you using Vue?
  • share live demo ?
  • Can you please give an example of how you added the arrays together in tableData. I had so much trouble with this before.
  • @charmGeld I added that seemingly before you made the comment! Good luck!