Question

我有两个组成部分，需要进行一些道具交换。道具是整个待办事项数组，可通过单击按钮的“ addTodo”方法对其进行更新。将数组向下传递给孩子很好。我可以在p标签中动态显示道具，但似乎无法在子组件的方法中使用道具。

    <template>
      <v-app>
        <v-content>
          <h2>Add a Todo</h2>
          <v-col cols="12" sm="6" md="3">
            <v-text-field label="Regular" v-model="text"></v-text-field>
          </v-col>
          <div class="my-3">
            <v-btn medium @click="addTodo">Add Todo</v-btn>
          </div>
          <div v-for="(todo, index) in todos" v-bind:key="index">
            <HelloWorld
              v-bind:todos="todos"
              v-bind:index="index"
              v-bind:class="(todos[index].done)?'green':'red'"
            />
          </div>
        </v-content>
      </v-app>
    </template>

    <script>
    import HelloWorld from "./components/ToDo.vue";

    export default {
      components: {
        HelloWorld
      },
      data: function() {
        return {
          text: "",
          todos: []
        };
      },
      methods: {
        addTodo() {
          this.todos.push({
            text: this.text,
            done: false
          });
        }
      }
    };
    </script>

这是我的孩子组成部分

    <template>
      <v-card max-width="250">
        <v-card-text>
          <h2 class="text-center">{{todos[index].text}}</h2>
          <p class="display-1 text--primary"></p>
          <p>{{index}}</p>
        </v-card-text>
        <v-card-actions>
          <v-btn text color="deep-purple accent-4" @click="done"></v-btn>
          <v-btn text color="orange accent-4">Delete Task</v-btn>
        </v-card-actions>
      </v-card>
    </template>

    <script>
    export default {
      props: ["todos", "index"],
      methods: {
        done() {
          this.todos[1].text = "bla";
        }
      }
    };
    </script>

    <style scoped>
    .seperator {
      display: flex;
      justify-content: space-between;
    }
    </style>

我传递带有对象作为道具的整个数组，并且在p-tag中使用索引可以正常工作，但我也想这样使用它：


      methods: {
        done() {
          this.todos[index].text = "bla";
        }
      }

未定义“索引”

一切正常，但是我无法在方法内部使用索引值。我在这里做错了什么？

Answer 1

写出来的方式，范围定义索引中没有任何内容。价值从何而来？

索引是一个属性，因此必须用this来引用。

done () {
     this.todos[this.index].text = 'bla'
}

循环渲染组件，在子组件（VueJS）的方法中使用索引

1 个答案: