vue下拉列表怎样动态默认选中

Question

<el-select :model.lazy="selected8" filterable @change="editUser">

            <el-option
              v-for="item in options8"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          

export default{
data(){
selected8:'',

     options8: [{
      value: '选项1',
      label: '黄金糕'
    }, {
      value: '选项2',
      label: '双皮奶'
    }, {
      value: '选项3',
      label: '蚵仔煎'
    }, {
      value: '选项4',
      label: '龙须面'
    }, {
      value: '选项5',
      label: '北京烤鸭'
    }],
    },
    computed:{
     selected8:function(){
         return this.$store.state.runner.region;
     }
    }
  }
  data里面selected不为空的话才可以赋值进去，但是就会出现无法选择其他选项的问题，等于selected被写死了，有没有大神有什么好的解决方法
  
  

Answer 1

selected不是应该设在data里面吗.怎么设在了computed ?

Answer 2

vue对chekbox，radio,select 进行设置v-model. v-model的值如果是它们的值，就会选中

<div id="example-5" class="demo">
  <select v-model="selected">
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <span>Selected: {{ selected }}</span>
</div>

new Vue({
  el: '#example-5',
  data: {
    selected: null //selected的值设置为A 就会选中A
  }
})

所以在<el-select v-model="...">
你不应该

computed:{
     selected8:function(){
         return this.$store.state.runner.region;
     }

操作的数据要放在data里。
你想拿到vuex里的数据直接赋值。但是你的state.runner.region未必有值，所以每次改变时要对其赋值，否则为空，或者初始的值。你可在每次onchange时把选项的值 给vuex数据state.runner.region