[Vuejs]-How to bind values with nested json?

by

2👍

✅

Vue.js v-bind is used to bind a tags attribute value to a property value.
If you want to render the property value in your template you’ll need to use interpolation

 <td>{{my_dates[0]['2018-03-23']['april']}}</td>

In Vuejs you use v-model when you want to provide 2-way binding with an input source. So, in your case you just need to add v-model to your input

<input v-model="my_dates[0]['2018-03-23']['april']" placeholder="date input" />

var app = new Vue({
  el: '#app',
  data: {
    my_dates:
    [
        {
          "2018-03-23": {
            "april": 10,
            "may": 9,
            "june": 8,
            "july": 7,
            "august": 6,
            "september": 5,
            "october": 4,
            "income_trips": "1234.00",
            "med_services": "123.00",
            "food_services": "12.00",
            "accom_services": "1.00",
            "collegium": "1234.00",
            "parking": "123.00",
            "wash": "12.00",
            "other": "1.00",
            "balance": "1234.00",
            "employees": 50,
            "season_employees": 20,
            "complaints": 0,
            "reviews": 0
          }
        }
    ]

  }
})
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<main id="app">
    <table>
      <thead>
        <tr>
          <th><input v-model="my_dates[0]['2018-03-23']['april']"        placeholder="april" /></th>
          <th><input v-model="my_dates[0]['2018-03-23']['may']"        placeholder="may" /></th>
          <th><input v-model="my_dates[0]['2018-03-23']['june']"        placeholder="june" /></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>{{my_dates[0]['2018-03-23']['april']}}</td>
          <td>{{my_dates[0]['2018-03-23']['may']}}</td>
          <td>{{my_dates[0]['2018-03-23']['june']}}</td>
        </tr>
      </tbody>
    </table>
</main>
👤slumbergeist

Leave a comment