0

我对 Vue.js 和 Buefy 很陌生，我相信我理解为什么会发生这种情况，但不知道如何解决它。

我有一个按国家排序的项目合作伙伴列表，我需要输出一个带有复选框的列表（无论如何我在页面上使用 Buefy）和国家名称作为标题（仅当有一个“新”国家时）。这以浏览器执行无限循环（使用 console.log 验证）结束，并且 Vue Devtools 发出警告“您可能在组件渲染函数中有无限更新循环”。

我相信这是因为更改 prevTitle 会触发重新渲染。我知道不可能将参数传递给计算属性，并且我无法使用我发现的任何技巧来使 partner.country 在那里可用。

var app = new Vue({
    el: "#app",
    data: {
      prevTitle: ""
    ...

    methods: {
      changeCountryTitle(country) {
        if (country != this.prevTitle) {
          this.prevTitle = country;
          return true;
        }
        return false;
    }

<template v-for="partner in results">
    <div v-if="changeCountryTitle(partner.country)">
        {{ partner.country }}
    </div>
    <b-checkbox ... >{{ partner.name }}, ...</b-checkbox>
    <br />
</template>

然后我尝试创建一个计算属性，在其中进行所有处理而不是模板中的 for 循环，并返回一个包含所有内容的字符串，包括 Buefy 标记，这将被称为

<span v-html="printPartnerList"></span>

但是那些 Buefy 标签不能正确呈现，只有 HTML 标签可以工作，浏览器会忽略 Buefy 标签，只显示正常的文本。

任何想法如何使它工作？暂时我在名称等之后为每个合作伙伴打印国家名称，但这不是应该如何工作的。

4

1 回答 1

0

v-html不评估 Vue（或者在这种情况下是 Buefy）组件，只评估常规 HTML 标签。

您的第一种方法并没有那么糟糕，但是您可以在项目中添加一个计算属性，而不是在内部调用方法v-for，以告知是否应该呈现国家/地区：

<template v-for="partner in computedResults">
    <div v-if="partner.showCountry">
        {{ partner.country }}
    </div>
    <b-checkbox ... >{{ partner.name }}, ...</b-checkbox>
    <br />
</template>

新应用：

var app = new Vue({
    el: "#app",
    data: {
      // prevTitle: "" <- not needed
    ...

    computed: {
      computedResults() {
        let prevCountry = ''
        let newResults = []
        this.results.forEach(partner => {
          let showCountry = false
          if (prevCountry != partner.country) {
            showCountry = true
          }
          newResults.push({
            ...partner,
            showCountry
          })
          prevCountry = partner.country
        })
        return newResults
      }
于 2020-02-20T04:32:13.313 回答