Question

我想知道是否可以将数据绑定到v-if指令，我有一个对象数组，这些对象表示导航链接或按钮（用于login，logout ...），每个对象都有一个v-if属性，其中我将v-if条件定义为字符串。

在我的laravel后端中：

$globals['socialLinks'] = 
        [
            [ 'title' => 'facebook', 'v-if' => '$app.auth', 'icon' => 'fab fa-facebook-f', 'url' => config('app.facebook'), 'image' => '/img/social/facebook-alt-white.svg' ],
        ];

在我的模板中（我将其转换为json并将其传递给我的vue组件模板）：

<div class="LAYOUTfooter9_row_container">
            <a class="LAYOUTfooter9_social_image_container" :href="social.url" v-for="(social,index) in $app.globals.socialLinks" v-if="[social.v-if]" :key="index+'S'">
                <img class="LAYOUTfooter9_social_image" :src="social.image">
            </a>
        </div>

Answer 1

Execute JavaScript code stored as a string可能危险。如果您确实需要三思而后行...

<a class="LAYOUTfooter9_social_image_container" :href="social.url" v-for="(social,index) in $app.globals.socialLinks" v-if="evaluateCondition(social.v-if)" :key="index+'S'">

methods: {
  evaluateCondition(condition) {
    return eval(condition)
  }
}

您的条件必须是一个表达式，并将在Vue实例的上下文中执行，因此您需要使用$app.auth代替this.$app.auth

数据绑定v-if动态条件

1 个答案: