如何在Vue.js模型中获取外部方法生成的值？

下面提供几种可行的实现方式，帮你把外部retrieval方法里的retName同步到Vue实例的data中：

方案1：让外部函数返回值，通过Vue方法调用 #

把按钮的点击事件绑定到Vue的方法里，在方法内调用外部函数并获取返回值，再赋值给data中的retName，这是最符合Vue规范的方式。

修改后的代码：

function retrieval(){
  const retName = "the cook is here"
  return retName // 返回变量值
}

new Vue({
  el: "#app",
  data: {
    retName: "",
  },
  methods: {
    toggle: function(todo){
      todo.done = !todo.done
    },
    getRetName() {
      this.retName = retrieval() // 调用外部函数并赋值
    }
  }
})

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

<div id="app">
  <h2>Todos:</h2>
  <button @click="getRetName">Click</button> <!-- 使用Vue的点击指令 -->
  {{retName}}
</div>

方案2：外部函数接收Vue实例作为参数，直接修改data #

如果必须保留原生onclick，可以把Vue实例传递给外部函数，让函数直接修改实例的data属性。

修改后的代码：

const vm = new Vue({
  el: "#app",
  data: {
    retName: "",
  },
  methods: {
    toggle: function(todo){
      todo.done = !todo.done
    }
  }
})

function retrieval(vueInstance){
  const retName = "the cook is here"
  vueInstance.retName = retName // 直接修改Vue实例的data
}

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

<div id="app">
  <h2>Todos:</h2>
  <button onclick="retrieval(vm)">Click</button> <!-- 传递Vue实例 -->
  {{retName}}
</div>

方案3：将Vue实例设为全局变量，外部函数直接访问 #

把Vue实例赋值给全局变量，外部函数可以直接通过这个全局变量修改data，适合无法修改按钮绑定方式的场景。

修改后的代码：

let vueApp;

function retrieval(){
  const retName = "the cook is here"
  vueApp.retName = retName // 访问全局Vue实例修改data
}

vueApp = new Vue({
  el: "#app",
  data: {
    retName: "",
  },
  methods: {
    toggle: function(todo){
      todo.done = !todo.done
    }
  }
})

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

<div id="app">
  <h2>Todos:</h2>
  <button onclick="retrieval()">Click</button>
  {{retName}}
</div>

注意事项 #

• 优先选择方案1，避免全局变量带来的作用域污染问题，更符合Vue的开发习惯。
• 方案2和3仅在必须使用原生onclick的场景下使用，注意全局变量的命名不要和其他代码冲突。

内容的提问来源于stack exchange，提问作者Vzupo