Question

我们在应用程序中使用Vex处理所有对话框消息。在其中一个对话框中，有一个用于过滤项目列表的输入。

在我的Vue实例中，我想听听data属性的更改。

问题在于，当我在输入框中键入更改时，Vue无法获得更改。我认为这是由于在Vue初始化之后将输入添加到DOM的事实。

我将如何处理这个问题，以便我的Vue实例可以侦听输入更改？我已尽力以下面的代码段中最简单的形式来重新创建场景。

new Vue({
  el: '#app',
  data: {
    filter: ''
  },
  methods: {
    openModal: function() {
      vex.dialog.open({
        input: [
        '<h2>Filter</h2>',
        '<input v-model="filter" />',
        '<p>{{filter}}</p>'
        ].join('')
      })
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vex-js/4.0.0/js/vex.combined.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/vex-js/4.0.0/css/vex.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>


<div id="app">
  <button v-on:click="openModal">Open Modal</button>
</div>

Answer 1

问题是您要向vex.dialog.open方法提供纯HTML字符串。 Vue不知道您已完成此操作，因此包含在这些字符串中的任何Vue语法都不会像在Vue组件定义中那样被解释。

您应该做的是为该输入创建Vue组件，然后通过ref将该输入的元素传递给vex.dialog.open方法。这样，Vue将在对话框中使用模板之前先对其进行编译。

这是一个简单的例子：

Vue.component('my-input', {
  template: `
    <div>
      <h2>Filter</h2>
      <input v-model="filter"/>
      <p>{{filter}}</p>
    </div>
  `,
  data() {
    return {
      filter: ''
    }
  }
});

new Vue({
  el: '#app',
  data() {
    return {
      modalOpened: false
    }
  },
  methods: {
    openModal() {
      vex.dialog.open({
        input: this.$refs.input.$el
      });
      this.modalOpened = true;
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vex-js/4.0.0/js/vex.combined.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/vex-js/4.0.0/css/vex.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>


<div id="app">
  <button @click="openModal">Open Modal</button>
  <my-input v-show="modalOpened" ref="input"/>
</div>

将尚不存在的Vue输入绑定到数据属性

1 个答案: