Vue 使用 getJSON 选择

Posted 2023-02-23

【中文标题】Vue 使用 getJSON 选择

【英文标题】：Vue select using getJSON

【发布时间】：2019-03-28 00:01:32

【问题描述】：

我正在使用 getJSON 调用返回字符串数组的外部 Web 服务。 我有一个绑定到 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>

谢谢 文基

【参考方案1】：

使用箭头函数(data)=>代替function (data) ...如下：

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

使用你的旧语法，你应该有这个错误：

这是未定义的

【讨论】：

这是正确的，因为回调中的“this”在不同的上下文中。