Question

您好我正在使用vuejs，我需要您的帮助才能获得最佳实践： langs：语言的对象：

langs: {'1':'fr', '2':'en', '3':'ar'},

has_lang：对于我需要为每个lang输入一个值的情况，等于1 并且对于我只需要为所有语言输入一个值的情况等于0

我现在做什么：

    <md-layout md-gutter>
        <md-input-container v-if="has_langs" v-for="lang in langs">
            <label>@{{ attribute.attribute }} @{{ lang }}</label>
            <md-input v-model="attValues"></md-input>
        </md-input-container>

        <md-input-container v-if="has_langs == 0">
            <label>@{{ attribute.attribute }} @{{ lang }}</label>
            <md-input v-model="inputa"></md-input>
        </md-input-container>
    </md-layout>

我需要的是不重复输入*两次这个输入*：

<md-input-container>
    <label>@{{ attribute.attribute }} @{{ lang }}</label>
    <md-input v-model="inputa"></md-input>
</md-input-container>

有一种方法可以在同一个元素或其他可以做到这一点的其他元素中设置v-for和v-if吗？

Answer 1

您可以将has_langs和langs的所有检查移动到代码中。

computed: {
   __langs(){
      return this.has_langs === 1? this.langs : {'0': 'Params for all'};
    }
},
methods: {
   manipulateWithLangs(){
    if (this.has_langs === 1){
    //do
    } else {
    // do something else
    }
  }
}



<md-layout md-gutter>
     <md-input-container v-for="lang in __langs">
        <label>@{{ attribute.attribute }} @{{ lang }}</label>
        <md-input v-model="attValues"></md-input>
    </md-input-container>
</md-layout>

Answer 2

您可以在组件级别v-if上使用v-else进行md-layout，并获得所需的结果。

<md-layout v-if="has_langs" md-gutter>
    <md-input-container v-for="lang in langs">
        ...
    </md-input-container>
</md-layout>

<md-layout v-else md-gutter>
    <md-input-container>
        ...
    </md-input-container>
</md-layout>

在同一元素中使用v-for和v-if

2 个答案: