时间戳

首页 > 解决方案 > Vue.js 2：如何绑定到组件方法？

vue.js - Vue.js 2：如何绑定到组件方法？

问题描述

我有一个带有私有对象数组的 VueJS (v2) 组件this.private.messagesReceived，我希望将其显示在文本区域中。该数组应通过方法/函数转换为字符串，并且 Vue 阻止了我所有的绑定尝试。每次尝试都会导致我的序列化函数（将数组转换为字符串）仅被调用一次，并且在数据更改时不再被调用。

我觉得必须有一种方法可以在没有Vue.set()forceUpdate 恶作剧的情况下做到这一点。

https://jsfiddle.net/hdme34ca/

尝试 1：计算方法

在这里，我们遇到了 Vue 只调用我的计算方法messagesReceived1一次并且再也不会调用的问题。

<script>
{
  computed: {
    messagesReceived1() {
      console.log("This is called once and never again even when new messages arrive");
      return this.private.messagesReceived.join("\n");
    },
  ...
  methods: {
    addMessage(m) {
      console.log("This is called multiple times, adding messages successfully");
      this.private.messagesReceived.push(m);
    }
  }
<script>
<template>
  <textarea rows="10" cols="40" v-model="messagesReceived1"></textarea>
</template

尝试 2：绑定方法

在这里，Vue 决定它不喜欢 textarea 中的胡须{{ messagesReceived2() }}并且拒绝。它也不允许messagesReceived2()或messagesReceived2在v-model.

<script>
{
  methods: {
    messagesReceived2() {
      return this.private.messagesReceived.join("\n");
    },
    addMessage(m) {
      console.log("This is called multiple times, adding messages successfully");
      this.private.messagesReceived.push(m);
    }
  }
</script>
<template>
  <textarea rows="10" cols="40">{{ messagesReceived2() }}</textarea><!--Nope-->
  <textarea rows="10" cols="40" v-model="messagesReceived2()"></textarea><!--Nope-->
  <textarea rows="10" cols="40" v-model="messagesReceived2"></textarea><!--Nope-->
</template

标签： vue.js

解决方案

您可以定义数据变量并在函数中设置其值。然后用textarea绑定变量，而不是直接用函数。

推荐阅读