CODEWITHSUNDEEP
javascriptvue.jsvuetify.js
Esau Gonzalez Soto
Esau Gonzalez Soto

Reputation: 3

Change value of v-model and update v-text-field

I made a fiddle where I tried to change one value of an array via code while it's used as v-model of a v-text-field from Vuetify.

The problem is, when I write something in the text field it does change the value correctly immediately, so I made a button that sets the value of the array in that specific index, it doesn't seem to be working, so I made another button to print it and it does work.

The first button changes the value to 0 as I'd like but in the v-text-field it still has the last typed value.

How to change the value of the v-text-field when the "reset" button is pressed?

new Vue({
  el: '#app',
  data() {
    return {
      model: [1, 2]
    }
  },
  methods: {
    restart() {
      this.model[0] = 0
    },
    showInConsole() {
      console.log("Current value:", this.model[0])
    }
  }
})
<!DOCTYPE html>
<html>

<head>
  <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">
  <link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>

<body>

  <div id="app">
    <v-layout row wrap>
      <v-flex xs4>
        <div class="headline">Change value of model[0]</div>
        <div class="headline text-xs-center">{{model[0]}}</div>
      </v-flex>
      <v-flex xs8>
        <v-text-field solo v-model="model[0]"></v-text-field>
      </v-flex>
      <v-flex xs12>
        <v-btn @click="restart ()">Reset to 0</v-btn>
        <v-btn @click="showInConsole ()">Show in console current value</v-btn>
      </v-flex>
    </v-layout>
  </div>

  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/vuetify/dist/vuetify.js"></script>
</body>

</html>

Link to my fiddle

Upvotes: 0

Views: 5182

Answers (1)

ittus
ittus

Reputation: 22393

It's Vue reactivity problem.

Basically, Vue cannot detect the changes to an array when you directly set an item with the index

You should use Vue.$set

restart () {
  this.$set(this.model, 0, 0)
}

Upvotes: 2

Related Questions