v-if 每个组件加载时

Question

目前，我正在将一些组件加载到一个更大的网格组件中（只是一个用于分组和显示子组件的组件）。

我想根据对象数据“featureButtonLink”是否为“''”来显示/隐藏按钮。 （如果不相等，则显示按钮）。

问题是，我不确定切换 v-if 的逻辑应该在子组件上，还是在数组本身所在的“网格”组件上。

这是我的代码示例 -

在子组件上：

<div v-if="link">
<h1>button here</h1>
</div>

<script>
export default {
    name: 'FeatureWork',
    props: [
        'featureTitle', 'featureDescription', 'featureImage', 'featureClass', 'featureButtonLink', 'featureButtonText',
    ],

    data () {
        return {
            link: false
        }
    },

    computed: {
        linkCheck: function() {
            if (this.featured.id.featureButtonLink != '') {
                this.link = true
                return this.link
            }
        }
    }
}

</script>

并且，这是我的“网格”组件（我正在使用 v-for + 数组数据加载子组件的组件，其中的值内部称为“featureButtonLink”）：

<template>
<div class="feature-work-row card-hover" :class="featureClass">
<div class="work-wrapper">
<!-- <div class="project-tags">
<p class="p-small text-weight-semi">Web Design</p>
<p class="p-small text-weight-semi">Web Design</p>
</div> -->



<div class="columns">
<div class="content">
<h4 class="text-weight-bold">{{ featureTitle }}</h4>
<p class="p-small text-color-regblue">{{ featureDescription }}</p>


<div class="button-container btn-main">
<router-link :to="featureButtonLink"><p class="p-small text-weight-semi">{{ featureButtonText }}</p></router-link>
</div>

<div v-if="link">
<h1>hey there</h1>
</div>
</div>

<div class="image">
<div class="image-wrapper">
<img :src="featureImage">
</div>

</div>
</div>



</div>
</div>
</template>

<script>
export default {
name: 'FeatureWork',
props: [
'featureTitle', 'featureDescription', 'featureImage', 'featureClass', 'featureButtonLink', 'featureButtonText',
],

data () {
return {
link: false
}
},

computed: {
linkCheck: function() {
if (this.featured.id.featureButtonLink != '') {
this.link = true
return this.link
}
}
}
}

</script>

或者，我猜另一个问题可能是......

如何从加载数据的组件中更改子组件的布尔值。

我的子组件使用“父”组件上的数组加载到 v-if 中。 如何将数据“true”传递回我的子组件，以决定是否在该按钮上显示（或不显示）按钮（同时使用 v-if）。

Answer 1

computed 的意义在于缓存您的数据，但您使用它的方式需要调用它。

这里有一些选项...

1 使用computed

按预期使用计算，通过返回值：

    data () {
        return {}
    },

    computed: {
        link: function() {
            return this.featured.id.featureButtonLink != '';
        }
    }

2 使用watch

    data () {
        return {
            link: false
        }
    },

    watch: {
      featured:{
        immediate: true
        handler: function(val) {
            if (val.id.featureButtonLink != '') {
                this.link = true
                return this.link
            }
        }
      }
    }

3 使用mounted生命周期钩子

如果 prop 没有更改，则基于传递的 prop 值一次性渲染，则使用计算的没有什么好处。相反，您可以只使用 mounted 生命周期挂钩，这将使其仅在挂载时运行。这意味着它不会对值的变化做出反应，所以我不会展示这个例子。