не может получить $ emit для передачи prop родителю в vuejs - PullRequest
Новая
       8

не может получить $ emit для передачи prop родителю в vuejs

0 голосов
/ 15 ноября 2018

Я делаю приложение todo, чтобы лучше понять 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>

1 Ответ

0 голосов
/ 15 ноября 2018

Проблема в том, что вы пытаетесь использовать синтаксис шаблона внутри атрибута, выполняемого в 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>

Надеюсь, это поможет!

...