将数据发送到 Vue 中的占位符答案

【问题标题】：Send data to a placeholder in Vue将数据发送到 Vue 中的占位符
【发布时间】：2021-12-31 14:29:34
【问题描述】：

我想显示列表中的数据。列表中的数据正在函数内部更新。实际上我只想在执行该函数后显示数据。

这是我的模板代码。

    <div class="modal-body">
          <td>{{shopName}}</td>
    </div>

这是我的脚本。

    <script>
    export default {
      name: "ViewShop",
      props:{
            shops:Object
        },
      data(){
        return{
          shopName:[],
        }
      },
      methods:{
        async shopd(sid){
          this.shopName=this.shops;
          console.log(this.shopName) // This prints the data in the console

        }
      }

    };
    </script>

我想在执行shopd()函数后在我的模板中打印shopName的值

我认为shopName是在模板中访问的在执行函数之前。所以我需要的是它应该等到函数在shopName中进行一些更改然后它应该访问模板。

【问题讨论】：

标签： javascript vue.js vuejs2 vue-component

【解决方案1】：

为此，您需要一个辅助变量：

    <script>
    export default {
      name: "ViewShop",
      props:{
            shops:Object
        },
      data(){
        return{
          shopName:[],
          showShopName: false,
        }
      },
      methods:{
        async shopd(sid){
          this.shopName = this.shops;
          this.showShopName = true;
        }
      }

    };
    </script>

然后在你的模板上：

    <div class="modal-body">
          <td>{{ showShopName ? shopName : "" }}</td>
    </div>

【讨论】：

还是不行。我认为 shopName 是在执行函数之前从模板中访问的。

【解决方案2】：

您可以使用 v-if 指令。在满足 v-if 条件之前，v-if 中的 html 不会成为 dom 的一部分。

<div class="modal-body" v-if="shopName.length>0">
      <td>{{shopName}}</td>
</div>

不确定 shopName 是数组还是字符串，条件可能会相应改变。您可以从文档中了解条件渲染：https://vuejs.org/v2/guide/conditional.html

【讨论】：

【解决方案3】：

现在，我不知道您是否需要一个数组作为类型或只是一个简单的字符串。但是在模板中你可以做到这一点。如果将变量 shopName 的类型更改为 null 并使用 v-if 指令隐藏元素。

   <div class="modal-body" >
      <td v-if=shopName !== null>{{shopName}}</td>
   </div>

https://vuejs.org/v2/guide/conditional.html

【讨论】：