CODEWITHSUNDEEP
javascriptvue.js
vimuth
vimuth

Reputation: 5632

vue.js prevent one data element from trigger update

Hi is there a way to stop triggering updated method in vue instance only for one element?. Here is my code,

vue instance..

           var vm = new Vue({
                el: '#el',
                data: {
                    cap: "",
                    radius: "",
                    var1: "",
                    var2: "",
                    var3: "",
                    items: null,
                }
                updated: function () {
                    axios.post('{{ url('car_result') }}', {data: this.$data})
                           .then(response => {
                            this.items = response.data;
                        });
                }
            });

This is my dom.

              <div id="el">
                    <input v-model="cap" type="text">
                    <input v-model="radius" type="text">
                    <input v-model="var1" type="text">
                    <input v-model="var2" type="text">
                    <input v-model="vat3" type="text">

                    <div class="item" v-for="item in items">
                        {{ item.id }}
                    </div>
                </div>

Here I need to stop triggering updated method when items changed

Upvotes: 0

Views: 441

Answers (1)

akuiper
akuiper

Reputation: 215047

How about grouping your input variables into a single input and then set up a watcher and update items only when the input changes ?

var vm = new Vue({
  el: '#el',
  data: {
    input: {
      cap: "",
      radius: "",
      var1: "",
      var2: "",
      var3: ""
    },
    items: null,
  },
  watch: {
    input: {
      handler (newInput) {
        axios.post('{{ url('car_result') }}', { data: newInput })
          .then(response => {
            this.items = response.data;
          });
      },
      deep: true
    }
  }
});

In your template:

<div id="el">
  <input v-model="input.cap" type="text">
  <input v-model="input.radius" type="text">
  <input v-model="input.var1" type="text">
  <input v-model="input.var2" type="text">
  <input v-model="input.vat3" type="text">

  <div class="item" v-for="item in items">
    {{ item.id }}
  </div>
</div>

Upvotes: 1

Related Questions