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

Question

我有两个组件，其中发生了一些道具交换。 Props 是整个 todo 数组，通过单击带有“addTodo”方法的按钮来更新。将数组传递给孩子工作正常。我可以在我的 p-tags 中动态显示道具，但似乎无法在我的子组件的方法中使用它。

    <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";
        }
      }

'index' 没有定义

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

Answer 1

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

索引是一个道具，所以必须用this引用。

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