Question

我是Vue的初学者，对于为什么不能同时从同一组件上的方法内部访问数据属性感到困惑。每次我尝试使用“ this.items”访问数据时，都会返回“ items is undefined”。

我尝试更改方法编写方式的语法（最初使用箭头函数，但得知它会更改“ this”，并切换为常规函数定义），但它仍返回未定义的项目。

这是我带有模板的完整组件：

<template>
    <div>
        <ul>
            <li v-for="(item, index) in items" :key="index">
            </li>
        </ul>
    </div>
</template>

<script>

    export default {
        data() {
            return {
                'items': []
            };
        },
        methods: {

            addItem: function(t) {

                this.items.push(t)
            }
        },
    }
</script>

这只是一个简单的待办事项列表，我还有另一个组件调用此函数并将参数传递给'addItem（）'。

谢谢！

Answer 1

这是您的代码的有效版本，演示了如何显示items并从UI向items数组中添加新元素：

https://codesandbox.io/embed/vue-template-7j0xj?fontsize=14

或者，如果您愿意，还可以在下面附加Vue组件代码：

<template>
    <div id="app">
        <div>Hello</div>
        <ul v-if="items">
            <li v-for="(item, index) in items" :key="index">
              <div>{{item}}</div>
            </li>
        </ul>
        <div @click="addItem('Something More')">Click to Add Something</div>
    </div>
</template>

<script>

export default {
  name: "App",
  data() {
    return {
      items: ['foo','bar','baz']
    };
  },
  methods: {
    addItem: function(t) {
      this.items.push(t)
    }
  },
};
</script>

Answer 2

组件之间最简单的通信方式是使用发射。

例如：这是您的父组件或子组件，此方法无关紧要。

<template>
    <div>
        <ul>
            <li v-for="(item, index) in items" :key="index">
            </li>
        </ul>
    </div>
</template>

<script>

    export default {
        data() {
            return {
                'items': []
            };
        },

        mounted(){
            this.eventHub.$emit('add_item:method', this.addItem);
        },

        methods: {

            addItem: function(t) {

                this.items.push(t)
            }
        },
    }
</script>

以及侦听事件方法的其他组件。

<template>

</template>

<script>

    export default {

        mounted(){
            this.eventHub.$on('add_item:method');
        },
    }
</script>

如何从组件方法访问Vue组件数据

2 个答案: