Question

我的Vue对象中有一个包含数组的变量，当我尝试以小胡子表示法访问它时，它是一个空数组。

我尝试用数组符号显示它，并且已经成功地从相同的vue对象和范围浮出了标量变量。

我有一个Vue实例（修剪了一下）：

MyVueInstance = new Vue({
    el: '#application-component',
    data() {
        return {
            form_in_progress: [],
            myvar: "foo"
        }
    },
    methods: {
        setFormInProgress: function(key, value){
            this.form_in_progress[key] = value;
        },
        addAllFieldsToFormInProgress: function (step, currentform) {

            console.log('addAllFieldsToFormInProgress: step:' + step);

            console.log(MyVueInstance.$refs);
            console.log(MyVueInstance.$refs[currentform].length);
            for (i = 0; i < MyVueInstance.$refs[currentform].length; i++) {
                MyVueInstance.setFormInProgress(MyVueInstance.$refs[currentform][i].name,
                MyVueInstance.$refs[currentform][i].value);
                console.log('Name: ' + MyVueInstance.$refs[currentform][i].name + " value: " + MyVueInstance.$refs[currentform][i].value);

            }
            console.log("form_in_progress:");
            console.log(MyVueInstance.form_in_progress)
            console.log("end of addAllFields...");
        }
    }
 }

在发生的事件中，我能够做到：

mounted: function () {
    Event.$on('step2', function () {
        console.log('caught event step2');
        // applicantform is a ref= on the form.
        MyVueInstance.addAllFieldsToFormInProgress(2, 'applicantform')
    });
}

我可以看到我的控制台日志产生了MyVueInstance.form_in_progress的良好转储。（事件的范围没有“ this”，所以我必须指定Vue实例。）

转储看起来像这样：

[_token: "dyUPurwtLLrXsxEBOsCfZULfETjW3auSI9utn1GH", hoh-first-name: "", hoh-middle-initial: "", hoh-last-name: "", hoh-ssn: "111-11-1111", …]
button: ""
hoh-citizenship: ""
hoh-dob: "month day, year"
hoh-email: ""
hoh-ethnicity: ""
hoh-first-name: ""
hoh-home-number: ""
hoh-last-name: ""
hoh-middle-initial: ""
hoh-mobile-number: ""
hoh-needs-accommodation: ""
hoh-needs-accommodation-type[]: "Sight"
hoh-notifications: "1"
hoh-race[]: "5"
hoh-sex: ""
hoh-ssn: "111-11-1111"
hoh-work-number: ""
physical-apt-suite-other: ""
physical-city: ""
physical-mailing-check: "1"
physical-state: ""
physical-state_input: ""
physical-street-address: ""
physical-zip: ""
_token: "dyUPurwtLLrXsxEBOsCfZULfETjW3auSI9utn1GH"
length: 0

经过第2步后，我尝试使用小胡子符号或v-for回显变量。

    {{ myvar }} - {{ form_in_progress}}
    <ul>
        <li v-for="value,key in form_in_progress">{{key}}</li>
    </ul>

我发现（在上面的第一行中，我可以成功显示myvar，但是form_in_progress显示了一个空数组，并且v-for循环不会运行，表现为好像form_in_progress为空，这与回显一个一对空的方括号。

所以我想知道为什么我的标量变量（myvar）在范围内，而我的数组（form_in_progress）在范围内却为空。如果超出范围，我会期望出现错误，而不是一对空的方括号。只是为了好玩，我尝试回显form_in_progress.length，实际上，它是零。

我注意到的一件事是myvar在代码中初始化为“ foo”，而form_in_progress是动态填充在方法中的。

有人可以解释如何将form_in_progress中的值包含在范围内吗？

谢谢，埃德

Answer 1

直接分配给数组中的特定索引不是被动的：List rendering caveats：

由于JavaScript的限制，Vue 无法检测以下内容   更改为数组：


直接用索引设置项目时，例如vm.items[indexOfItem] = newValue

修改数组的长度时，例如vm.items.length = newLength

相反，请尝试this.form_in_progress.splice(key, 1, value);。

考虑以下示例：

changeWithBrackets将有效执行您的代码：

this.form_in_progress[key] = value;

changeWithSplice将按照我的建议进行：

this.form_in_progress.splice(key, 1, value);

演示：

const app = new Vue({
  el: "#app",
  data() {
    return {
      items: ["foo", "bar", "fizz", "buzz"]
    };
  },
  methods: {
    changeWithBrackets() {
      this.items[0] = "world";
    },
    changeWithSplice() {
      this.items.splice(0, 1, "world");
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <ul>
    <li v-for="item in items">{{item}}</li>
  </ul>
  <button @click="changeWithBrackets">Change with brackets</button>
  <button @click="changeWithSplice">Change with splice</button>
</div>

Vue：访问包含数组的绑定变量的元素

1 个答案: