Question

可以在Vue组件模板中使用v-model语法吗？

直接包含在.html

中时，以下工作正常

<input type="text" v-model="selected_service_shortname">

将以下内容放入组件模板中不起作用。

var service_details = {
    template: `
    ...
    <input type="text" v-model="selected_service_shortname"> 
    ...
`
};


vm = new Vue({
    el: "#app",
    components: {
        'service-details': service_details
    },

vue.min.js:6 ReferenceError: selected_service_shortname is not defined

中的结果

将模板语法更改为

<input type="text" v-model="this.$parent.selected_service_shortname">

似乎中途工作 - 外部应用于selected_service_shortname的更改按预期显示在输入框中。但是直接对输入框进行更改会导致Uncaught TypeError: Cannot convert undefined or null to object

我正在尝试使用支持的用例吗？如果是的话，某处有工作实例吗？

Answer 1

您可以在组件中实现对v-model的支持。文档here中介绍了这一点。

这是一个例子。

var service_details = {
  props: ["value"],
  template: `
          <input type="text" v-model="internalValue"> 
        `,
  computed: {
    internalValue: {
      get() {
        return this.value
      },
      set(v) {
        this.$emit("input", v)
      }
    }
  }
};

基本上，默认情况下，v-model只是用于传递value属性并侦听input事件的糖。因此，您需要做的就是向组件添加value属性，并发出input事件。这也可以自定义为described in the documentation。

console.clear()

var service_details = {
  props: ["value"],
  template: `
          <input type="text" v-model="internalValue"> 
        `,
  computed: {
    internalValue: {
      get() {
        return this.value
      },
      set(v) {
        this.$emit("input", v)
      }
    }
  }
};

new Vue({
  el: "#app",
  data: {
    selected_service_shortname: "some service name"
  },
  components: {
    'service-details': service_details
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script>

<div id="app">
  <service-details v-model="selected_service_shortname"></service-details>
  <hr>
  Selected Service Shortname: {{selected_service_shortname}}
</div>

在父母身上使用如下：

<service-details v-model="selected_service_shortname"></service-details>

是否可以在组件模板中使用v模型？

1 个答案: