[Vuejs]-How do i make the vue model reflect a change

by

0👍

✅

Observations :

  • Strings are immutable. Hence, The string manipulation methods such as split returns a new array and will not update the original string. Ex :
let chunk = 'this is a chunk';

const newStr = chunk.split('n');

console.log(chunk); // this is a chunk (Not changing the original string)

console.log(newStr); // updating the maniupulated values in a new variable.
  • As chunk2 is an empty string and you are assigning it back into chunk will update chunk also empty.
  • this.chunk.split('n') will split the string with excluding n. Hence, If you want to include n. You have to split it with k.

Working Demo :

new Vue({
  el: "#app",
  data: {
    chunk:"this is a chunk",
    chunk2:"",
    todos: [
      { text: "Learn JavaScript", done: false },
      { text: "Learn Vue", done: false },
      { text: "Play around in JSFiddle", done: true },
      { text: "Build something awesome", done: true }
    ]
  },
  methods: {
    toggle: function(){
      this.chunk = this.chunk.split('k')[0];
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <h2>Todos:</h2>
  {{chunk}}
  {{chunk2}}
  <br>
  <button v-on:click="toggle()">magic
  </button>
</div>

Leave a comment