Question

我的文字输入附有v-model和v-on:change。作为用户类型，我在data中更新数组，并且UI绑定到该数组。我还想调用一个方法来通过AJAX发送用户输入。发送到服务器的数据是计算属性的结果。

<div id="app">
  <input
      id="user-input"
      type="text"
      v-model="userInput"
      v-on:change="process()">

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

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

let serverProcess = values => {
    // Send array to server
}

new Vue({
  el: '#app',
  data: {
    userInput: ''
  },
  computed: {
    parsedInput () {
        return parse(this.userInput)
    }
  },
  methods: {
    process () {
        serverProcess(this.parsedInput);
    }
  }
});

同时使用v-model和v-on:change最佳实践Vue？

Answer 1

我建议使用手表而不是class CoreButton(ttk.Frame): def __init__(self, master, nickname='CoreBut.inc', hw_in=[], hw_out=[], ip_in='', \ ip_out='', sched_vector=[], num_buts=1): ttk.Frame.__init__(self, master) # Styles self.style = ttk.Style() self.style.configure("Azure.TFrame", background='azure4') self.style.configure("Blue.TFrame", background='blue') self.style.configure("Blue2.TFrame", background='light steel blue') self.style.configure("Red.TButton", foreground='red') # Frames # Buttons&Indicators py, px = 4, 4 self.main_frame = ttk.Frame(self, style="Blue2.TFrame", relief=tk.RIDGE) self.main_frame.grid() self.buttons_frame = ttk.Frame(self.main_frame, relief=tk.RIDGE, style="Azure.TFrame") self.buttons_frame.grid(row=0, column=0, pady=py, padx=px) # Counters self.timers_frame = ttk.Frame(self.main_frame, relief=tk.RIDGE, border=5, style="Azure.TFrame") self.timers_frame.grid(row=1, column=0, pady=py, padx=px, sticky=tk.E+tk.W) # Extra GUI self.switches_frame = ttk.Frame(self.main_frame, relief=tk.RIDGE, border=5, style="Azure.TFrame") self.switches_frame.grid(row=2, column=0, pady=py) # Run Gui # self.build_gui() self.extras_gui() def extras_gui(self): ck1 = tk.Checkbutton(self.switches_frame, text='On/Off', variable=self.on_off_var, \ indicatoron=1, command=self.disable_but) ck1.grid(row=0, column=0) ck2 = tk.Checkbutton(self.switches_frame, text='Schedule', variable=self.enable_disable_sched_var, \ indicatoron=1, command=lambda: self.disable_sched_task(s=self.enable_disable_sched_var.get())) ck2.grid(row=1, column=0)。在视图中，您将删除v-on:change。任何时候v-on:change发生更改（由于userInput更改），都会调用watch函数。重要的是，watch函数的名称与computed / data属性相同。

parsedInput

您可以在此处阅读有关手表的更多信息https://vuejs.org/v2/guide/computed.html#Watchers

IMO，这更好，因为您通过代码而不是视图描述了应用程序的更多行为。这将使您的组件更易于测试。除了通过v-model之外，如果new Vue({ computed: { parsedInput () { return parse(this.userInput) } } methods: { process () { serverProcess(this.parsedInput); } }, watch: { parsedInput() { this.process() } } })或parsedInput由于某些其他原因而发生变化，那么它也会被调用。

Answer 2

竖起大拇指 @ kmc0590000 作为补充。通过手表，您还可以看到以前的状态和当前状态。它们作为参数传递。

v-model 只是语法糖，并执行以下操作：

<input :value="userInput" @input="change">

您也可以写@change代替v-on:和:value代替v-bind:value。

在第6行（v-on:change="process()"）中，您可以删除括号。输入事件作为参数提供给您的方法，您可以直接访问属性。（https://vuejs.org/v2/guide/events.html#Method-Event-Handlers）

这是v-on的正确用法：更改？

2 个答案: