小编Hay*_*l58的帖子

我有一个customer对象作为我的初始数据。我有一些文本字段，当有人开始输入时，它会向对象添加不同的键。添加新值时key，观察器会正确触发，但如果从现有值编辑该键，则不会。

因此，如果我输入街道地址，则会key street_address1将其添加到customer对象中，以便观察者触发。如果我开始编辑街道地址，它就不会再触发。

模板

<v-container>
  <v-col cols="12">
    <h2>Contact</h2>
    <div>Email Adderss</div>
    <v-text-field
      outlined
      v-model="customer.email"
      >
    </v-text-field>
  </v-col>

  <v-col cols="12">
    <v-row>
      <v-col cols="6">
        <div>First</div>
        <v-text-field
          outlined
          v-model="customer.first"
          >
        </v-text-field>
      </v-col>
      <v-col cols="6">
        <div>Lasts</div>
        <v-text-field
          outlined
          v-model="customer.last"
          >
        </v-text-field>
      </v-col>
    </v-row>
  </v-col>

  <v-col cols="12">
    <div>Shipping Address Line 1</div>
    <v-text-field
      outlined
      v-model="customer.street_1"
      >
    </v-text-field>
  </v-col>

  <v-col cols="12">
    <div>Shipping Address Line 2</div>
    <v-text-field
      outlined
      v-model="customer.street_2"
      >
    </v-text-field>
  </v-col>
</v-container>

脚本

data() {
  return {
    customer: {}
  }; …

我收到此警告：

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

下面是我的基本样板代码。我知道它阻止我Foo像这样创建我的组件，但这究竟意味着什么，它与另一种实例化 Vue 实例的方式有什么不同？

const Foo = {
  template: `<div>xxx</div>`
}
const routes = [
  { path: '/foo', component: Foo },
  { path: '/', component: App}
]
    
const router = new VueRouter({
  routes:routes
})
Vue.config.productionTip = false
    
new Vue({
  router
}).$mount('#app')