Question

我正在制作一个待办事项应用程序，以更好地了解Vue并遇到麻烦。

我经历了几个StackOverflow问题和Vuejs论坛，但是我不了解自己在做什么错误。

问题源于to-do-item组件模板：

  <button 
    @click="$emit('remove-item', {{item.id}} )">
    Remove
  </button>

如果我将$emit替换为不调用$emit的组件方法，则效果很好，但是当我使用$emit（即使在本地组件函数中）时，它也拒绝渲染。

我不确定为什么会这样。这是我其余的代码：

Vue.component("todo-item", {
  props:["item"],
  template: `
<li>{{ item.text }} 
  <button 
    @click="$emit('remove-item', {{item.id}} )">
    Remove
   </button>
</li>`
})

let vm = new Vue({
  el:"#app",
  data: {
    text: "",
    todos: []
  },
  methods: {
    getID: (function() {
      let id = 0;
      return function() {
        return id++;
      }
    }()),
    addTodo: function() {
      this.todos.push({id: this.getID(), text: this.text});
      this.text = "";
    },
    remove: function(remove_id) {
      this.todos = this.todos.filter(({id}) => id != remove_id);
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js"></script>
<div id="app">
  <div id="container">
    <main>
      <ul>
         <todo-item
                    v-for="todo in todos"
                    :item="todo"
                    @remove-item="remove"
                   >
          </todo-item>
      </ul>
    </main>
  <div id="add-field">
  <input v-model="text" /> <button id="add" @click="addTodo">Add Todo</button>
    </div>
    </div>
</div>

Answer 1

问题是您试图在javascript执行的属性内使用模板语法：

<button 
    @click="$emit('remove-item', {{item.id}} )">

解决此问题，它应该可以工作：

Vue.component("todo-item", {
  props:["item"],
  template: `
<li>{{ item.text }} 
  <button 
    @click="$emit('remove-item', item.id )">
    Remove
   </button>
</li>`
})

let vm = new Vue({
  el:"#app",
  data: {
    text: "",
    todos: []
  },
  methods: {
    getID: (function() {
      let id = 0;
      return function() {
        return id++;
      }
    }()),
    addTodo: function() {
      this.todos.push({id: this.getID(), text: this.text});
      this.text = "";
    },
    remove: function(remove_id) {
      this.todos = this.todos.filter(({id}) => id != remove_id);
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js"></script>
<div id="app">
  <div id="container">
    <main>
      <ul>
         <todo-item
             v-for="todo in todos"
             :item="todo"
             @remove-item="remove"
             >
          </todo-item>
      </ul>
    </main>
  <div id="add-field">
      <input v-model="text" /> 
      <button id="add" @click="addTodo">Add Todo</button>
  </div>
</div>

希望这会有所帮助！

无法获得$ emit将道具传递给vuejs中的父项

1 个答案: