CODEWITHSUNDEEP
vue.js
Soundar Rajan
Soundar Rajan

Reputation: 352

Binding to array fields in vue.js

I want to make multiple 'in-place' editable date fields in table rows. An example for a single field below works. I show the currentdate (oldDate) as a label. User clicks on 'Change', an input field appears, after editing the user can Accept or Cancel.

https://jsfiddle.net/asrajan55/qv6crg84/

<div id="root">
    <label>Test Date:</label>
    <span v-show="!makeEditable"> {{ oldDate }} </span>
    <span v-show = "makeEditable">

        <input type="date" v-model="newDate" required=""/>
        <button @click="acceptClicked">Accept</button>
        <button name="cancel" @click="makeEditable=false">Cancel</button>
    </span>
    <button v-show="!makeEditable" @click="makeEditable=true" >Change</button>
  </div>

  new Vue({
      el: "#root",
      data: {
        oldDate: '2019-02-04',
        newDate: '2019-02-04',
        makeEditable: false,
      },

      methods: {
        acceptClicked(){
          if (this.newDate!='') {
            this.oldDate=this.newDate;
            this.makeEditable=false;
          }
        }
      }
   });

However if I try multiple(2) fields the click event fires (sometimes) but nothing seems to happen. No errors in console. Also the Vue debugger in the browser does not immediately update the changed fields. Please help. I am desperate and pulling my hair out!

https://jsfiddle.net/asrajan55/9uhkr4w0/3/

<div id="root">
    <div v-for="(item,index) in oldDates">
        <label for="">Test Date:</label>
        <span v-show="!editables[index]">{{item}}</span>
        <input v-show="editables[index]" type="date" v-model="oldDates[index]"/>
        <button v-show="editables[index]">Accept</button>
        <button v-show="editables[index]" @click="editables[index]=false">Cancel</button>
        <button v-show="!editables[index]" @click="makeEditable(index)">Change</button>
        <hr />
    </div>

</div>

new Vue({
    el: "#root",
    data: {
        oldDates: ['2019-01-04', '2019-02-04'],
        newDates: ['2019-01-04', '2019-02-04'],
        editables: [false, false]
    },

    methods: {
        makeEditable(index) {
            alert(index);
            this.editables[index] = true;
        }
    }
});

Upvotes: 1

Views: 523

Answers (2)

Ziv Klein
Ziv Klein

Reputation: 56

Try using this.$set(this.editables, index, true);

Vue can't detect changes to arrays if you directly access an element using []. Read about it here:

https://vuejs.org/2016/02/06/common-gotchas/#Why-isn%E2%80%99t-the-DOM-updating

Upvotes: 1

Dhananjai Pai
Dhananjai Pai

Reputation: 6015

The problem was that you were mutating the array in place, creating a new array reference and passing it would solve the issue

fixed here : https://jsfiddle.net/e3L2zcna/

makeEditable(index) {
      this.editables = this.editables.map((val,i) => i===index || val);
    }

Upvotes: 2

Related Questions