Question

我的文字输入v-model将其值绑定到data。我还希望能够在parse()值更改时调用v-model函数，以便更新同时位于data的数组。

<div id="app">
    <input
        id="user-input"
        type="text"
        v-model="userInput">

   <ul id="parsed-list">
      <li v-for="item in parsedInput">
          {{ item }}
      </li>
    </ul>
</div>

new Vue({
  el: '#app',
  data: {
    userInput: '',
    parsedInput: []
  }
})

let parse = input => {
    return input.split(',')
}

如何使用v-model更改使用data.parsedInput函数更新parse()？这样做的Vue方式是什么？

Answer 1

依赖于另一个数据属性的数据属性的正确Vue方式是computed property，这样chain.next()会在parsedInput更改时自动更新：

＆＃13;

userInput

＆＃13;

let parse = input => {
  return input.split(',')
}

new Vue({
  el: '#app',
  data: {
    userInput: '',
  },
  computed: {
    parsedInput() {
        return parse(this.userInput)
    }
  }
})

＆＃13;

作为旁注：在使用之前声明<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/vue.js"></script> <body> <div id="app"> <input id="user-input" type="text" v-model="userInput"> <ul id="parsed-list"> <li v-for="item in parsedInput"> {{ item }} </li> </ul> </div> </body>函数，以防止parse错误。

在v-model更改时更新值

1 个答案: