javascript - 从数组返回一个字符串

Question

我只想从vue中的数组返回一个字符串。我做了这样的方法:

displayFixturesName() {
                const result = this.selectedFixture.toString();
                document.getElementById('resultFixture').innerHTML = result.join()

            }

this.selectedFixture 是我选择的数组

我这样显示

<p class="subtitle" id="resultFixture">{{displayFixturesName()}}</p>

最后，我的控制台中出现一条消息，但它不起作用 -

[Vue warn]: Error in render: "TypeError: result.join is not a function"

Answer 1

在 Vue 中执行此操作的正确方法是使用计算属性返回字符串:

computed: {
  displayFixturesName() {
    return this.selectedFixture.join(', ');
  }
}

然后在模板中您将拥有:

<p class="subtitle">{{ displayFixturesName }}</p>

我已经删除了 id (你不应该需要它，如果你需要抓取一个元素，Vue 有 ref)以及 () 来自 displayFixturesName 之后。

一般来说，你应该避免自己操作 DOM，而让 Vue 来做。有一些异常(exception)，例如使用第三方库或测量大小，但这种情况很少见。

有关计算属性的文档位于此处:

https://v2.vuejs.org/v2/guide/computed.html#Computed-Properties