javascript - Vue 使用 getJSON 选择

Question

我正在使用 getJSON 调用返回字符串数组的外部 Web 服务。我有一个绑定(bind)到 JSON 数据的选择。但下拉菜单不显示数据。 IE 控制台显示数据数组。如果我将其输出为表格，它将显示在浏览器上。有什么想法吗？

eg:json返回数据(IE控制台):

["process1\\test1","process2\\test1","process3\\test1","process3\\test2"]

代码:

<script type="text/javascript">
        var app1 = new Vue({
            el: '#app1',
            data: {     
                selected: '',
                options: []
            },
            methods: {
                getData: function () {
                    $.getJSON("https://testapp/getmyprocesses?callback=?", function (data) {
                        this.options = data;
                        console.log(JSON.stringify(data));
                    });
                }
            },
            mounted: function () {
                this.getData();
            }     
        });
    </script>

<div id="app1">

    <select v-model = "selected">
     <option value="">Select a Process</option>
      <option v-for = "option in options" v-bind:value="option">
        {{ option }}
      </option>
    </select>
   <span>Selected: {{ selected }}</span>
    </div>

谢谢文基

Answer 1

使用箭头函数(data)=>代替function (data) {...，如下所示:

     getData: function () {
                $.getJSON("https://testapp/getmyprocesses?callback=?",(data)=> {
                    this.options = data;
                    console.log(JSON.stringify(data));
                });
            }

使用旧语法，您应该遇到此错误:

this is undefined