nafeeur10's avatar

How to change Label Value in Vue with Element

I am using Element (https://element.eleme.io/#/en-US/component/select) to design my Admin Panel.

I have a Select. Now I want to select an option. With that The header of the Table Title will be changed. How is this possible?

Another problem is I want to placeholder the first element of the Select-Option.

Code:

Select Part:

<el-select v-model="value" placeholder="Select">
  <el-option
  v-for="item in options"
  :key="item.value"
  :label="item.label"
  :value="item.value"
  />
</el-select>

Table:

<el-table>
   <el-table-column label="value" width="120px" align="center" />
</el-table>

I want to make dynamic this label

JS:

data() {
    return {
      options: [{
        value: 'billingCountry',
        label: 'Billing Country'
      }, {
        value: 'billingState',
        label: 'Billing State'
      }, {
        value: 'billingCity',
        label: 'Billing City'
      }, {
        value: 'billingZIP',
        label: 'Billing ZIP'
      }, {
        value: 'shippingCountry',
        label: 'Shipping Country'
      }],
      value: ''
  }
}
0 likes
2 replies
mrperfectionist's avatar
Level 2

@nafeeur10,

You have to Bind the Label.

<el-table>
   <el-table-column :label="value" width="120px" align="center" />
</el-table>

Placeholder will also be Bind.

:placeholder="options[0].label"
1 like
HenryRoot's avatar

the issue will be that the computed prop will override the initial value in data because the store also has an initial value of that variable. unless you tell the component to change the variable in data only if the computed property meets a certain condition

vacances Kenya

Please or to participate in this conversation.