将方法中的数据绑定到Vue

Question

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

这是我的模板代码

    <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中进行一些更改，然后它应该访问模板。

Answer 1

如果您想在渲染组件时将shops对象打印为shopName的默认值，因为它已经是一个道具，您可以在shopName变量中简单地调用它。

      props:{
            shops:Object
        },
      data(){
        return{
          shopName: this.shops,
        }
      },

然后，如果你想在路上更新shopName变量的值，你可以用shopd方法很好地分配新值，但你需要一个触发事件，它实际上是你将用于绑定的。例如：

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

相当于

    <div class="modal-body">
          <td v-on:click="shopd">{{shopName}}</td>
    </div>

最后，如果您只想在分配默认shopName值之前处理shops道具一次，您可以简单地调用shopName变量中的函数并返回结果

      data(){
        return{
          shopName: this.shopd,
        }
      },
      methods: {
          shopd() {
              return this.shops
          }
      }