Question

如果我使用Vue 2中的props传递一个对象数组并且在这个数组上使用v-for指令，如果删除了其中一个数组元素，则视图不会更新。

这似乎只有在v-for元素声明为数据时才有效，但我的组件需要接收道具......

在下面的示例中，您可以看到static JFrame gui; public static void main(String[] args) { int[] colors = new int[81]; for (int n=0; n<81; n++) { colors[n] = 0; } setupGUI(colors); } private static void setupGUI(int[] colors) { gui = new JFrame("9x9x9 LED-Cube GUI"); gui.setSize(905, 925); gui.setResizable(false); gui.setLayout(new BorderLayout()); for (int i=0; i<9; i++) { for (int b=0; b<9; b++) { int bn = b; Button br = new Button((i+1) + "|" + (b+1)); br.setBounds(b*100, i*100, 100, 100); gui.add(br); br.addActionListener(new ActionListener() { public void actionPerformed(ActionEvent e) { changeButtonColor(br, colors, bn); } }); } } gui.setVisible(true); } public static void changeButtonColor(Button br, int[] colors, int bn) { if(colors[bn] == 0) { br.setBackground(Color.green); colors[bn] += 1; } else { br.setBackground(new Color(240, 240, 240)); colors[bn] -= 1; } System.out.println(colors[bn]); //for test purposes to display the state change }数组中的元素确实已删除，但v-for未被触发。

我很确定我在这里做错了什么......

＆＃13;

services

＆＃13;

Vue.component('location-service-list', {
  props: ['services'],
  template: '<div>{{ services }}<div v-for="(service, index) in services">{{ service.id }} - {{ service.name }} <a @click.prevent="remove(index)">remove</a></div></div>',
  methods: {
    remove(index) {
        this.services.splice(index, 1);
        console.log(this.services);
      },
  }
});

const app = window.app = new Vue({
  el: '#admin-app'
});

＆＃13;

Answer 1

尝试在根组件中定义servicesList，如下所示：

const app = window.app = new Vue({
    el: '#admin-app',
    data: {
        servicesList: [{"id":1,"name":"Test 1"},{"id":2,"name":"Test 2"}]
    }
});

您的模板为：

<div id="admin-app">
    <location-service-list :services='servicesList'></location-service-list>
</div>

现在它可以正常工作而没有任何问题。它之前没有工作，因为您将它作为常量/不可变对象传递（父模板中的JSON字符串，只要父模板重新呈现，它总是会计算为相同的值）。

从技术上讲，您不应该更改通过子组件中的props传递的对象。如果对通过props传递的字符串值执行相同操作，则会收到如下错误消息：

[Vue警告]：避免直接改变道具......

要从父组件处理此删除操作，您可以参考此问题下的答案：Delete a Vue child component

该答案中的jsFiddle提供了一种从子组件向父组件发送事件的方法，以便可以删除相应的子组件。

在Vue 2中传递道具v-for后，在删除项目后不会更新

1 个答案: