V-если на компонент при загрузке - PullRequest
Новая
       10

V-если на компонент при загрузке

0 голосов
/ 19 февраля 2019

В настоящее время я загружаю несколько компонентов в более крупный компонент сетки (просто компонент для группировки и отображения дочерних компонентов).

Я хочу показать / скрыть кнопку в зависимости от того, является ли объектdata "featureButtonLink" это = "''" или нет.(если он не равен, то покажите кнопку).

Проблема в том, что я не уверен, где должна быть логика для переключения v-if на дочернем компоненте или на компоненте "grid"где сам массив.

Вот мой пример кода -

На дочернем компоненте: 

<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>

и,вот мой компонент "grid" (компонент, в который я загружаю дочерний компонент с массивом данных 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) на этой кнопке.

1 Ответ

0 голосов
/ 19 февраля 2019

Смысл 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 ловушка жизненного цикла

Если реквизит не изменяется, то он отображается один раз на основе переданного значения реквизита, использование вычисляемого дает небольшую выгоду.Вместо этого вы можете просто использовать хук жизненного цикла mounted, который будет запускаться только при монтировании.Это означает, что он не будет реагировать на изменения значения, поэтому я не буду показывать пример.

...