Vue不保存点击的元素样式

Question

我正在生成小项目列表。点击每一个项目后，它应该改变样式。只能选择一个项目。如果您点击另一个项目，则第一个项目会反转为默认值。

我遵守了代码：

<div class="LngList">
    <div class="lng" v-for="item in languages">
        <button :class="[ isLangSelected ? 'ui inverted basic button' : 'ui inverted red basic button' ]" @click=LangSelect(item.lang)>{{item.lang}}</button>
    </div>
</div>

我的方法：

data: function (){
return {
        isLangSelected: false,
        mycode: "",
        languages: [
            {lang:'D'},
            {lang:'C#'},
            {lang:'Python'}
        ],
        selectedLanguage: ""
    }
},
methods: {
LangSelect(lang)
{
    this.selectedLanguage = lang;
    if(this.selectedLanguage.length != "")
    {
        this.isLangSelected = !this.isLangSelected;
    }
}
}

但是当我在按钮外面点击时，我正在失去选定的风格。

我做了小gif来表明问题：

Answer 1

这当然可以使用按钮，但为什么不使用无线电输入呢？只选择了一个项目，这就是他们所做的。

new Vue({
  el: '#app',
  data() {
    return {
      languages: [{
          lang: 'D'
        },
        {
          lang: 'C#'
        },
        {
          lang: 'Python'
        }
      ],
      selectedLanguage: ''
    };
  },
  computed: {
    isLangSelected() {
      return this.selectedLanguage !== '';
    }
  }
});

input[type=radio] {
  visibility: hidden;
  width: 0;
}

input[type=radio]:checked + span {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>

<div id="app">
  <label v-for="lang in languages">
    <input type="radio" name="languages"
      v-model="selectedLanguage" :value="lang.lang">
    <span>{{lang.lang}}</span>
  </label>
  <div v-if="isLangSelected">
    Selected language is: {{ selectedLanguage }}
  </div>
</div>