在一个vue实例中具有多个数据的类似组件

Question

一页的组件基本相似，但填充了个别数据，组件来自 Element-UI

var Main = {
  data() {
    return {
      options: [{
          value: 'Option1',
          label: 'Option1',
        },

        {
          value: 'Option2',
          label: 'Option2',
        },
        {
          value: 'Option3',
          label: 'Option3',
        },
      ],
      value: '',
      optionss: [{
          values: 'bKash',
          label: 'bKash',
        },

        {
          values: 'Rocket',
          label: 'Rocket',
        },
        {
          values: 'Bank A/C',
          label: 'Bank A/C',
        },
      ],
      values: '',
    }
  }
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

@import url("//unpkg.com/element-ui@2.11.1/lib/theme-chalk/index.css");

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.11.1/lib/index.js"></script>
<div id="app">
  <template>
    
    <div>
       <el-select v-model="value" placeholder="Select Account">
              <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
              </el-option>
</el-select>
    </div>
    <br/><br/>
    
  <div>
    <el-select v-model="values" placeholder="Select Account">
              <el-option
                      v-for="item in optionss"
                      :key="item.values"
                      :label="item.label"
                      :values="item.values">
              </el-option>
 </el-select>
    
    
    
    
    
  </div>
 
</template>
</div>

一个组件工作正常，但 select 上的其他组件不工作，但数据填充正确，为什么？

Answer 1

消息错误很明显，您在第二个组件中遗漏了值，您在 el-option 中编写了 :values 而不是 :value，但是标签没问题，因此该组件可以填充标签而不是值。

var Main = {
  data() {
    return {
      options: [{
          value: 'Option1',
          label: 'Option1',
        },

        {
          value: 'Option2',
          label: 'Option2',
        },
        {
          value: 'Option3',
          label: 'Option3',
        },
      ],
      value: '',
      optionss: [{
          value: 'bKash',
          label: 'bKash',
        },

        {
          value: 'Rocket',
          label: 'Rocket',
        },
        {
          value: 'Bank A/C',
          label: 'Bank A/C',
        },
      ],
      values: '',
    }
  }
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

@import url("//unpkg.com/element-ui@2.11.1/lib/theme-chalk/index.css");

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.11.1/lib/index.js"></script>
<div id="app">
  <template>
    
    <div>
       <el-select v-model="value" placeholder="Select Account">
              <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
              </el-option>
</el-select>
value= {{value}}
    </div>
    <br/><br/>
    
  <div>
    <el-select v-model="values" placeholder="Select Account">
              <el-option
                      v-for="item in optionss"
                      :key="item.values"
                      :label="item.label"
                      :value="item.value"> <!-- here was the error -->
              </el-option>
 </el-select>

values = {{values}}
    
    
    
    
    
  </div>
 
</template>
</div>

在一个vue实例中具有多个数据的类似组件

Similar components with multiple data in one vue instance

javascript

vue.js

vue-component

element-ui