How to change Label Value in Vue with Element

I am using Element 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: ''
  }
}

Hi

You could write it like this:

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

The magic is the colon before label. It is a shortcut for v-bind:label (see here https://vuejs.org/v2/guide/syntax.html#Attributes). However it writes the value of the selected options. If you want to have the label can you create a computed property which finds the label for the selected value:

computed: {
  selectedLabel() {
     if (! this.value) {
       return 'None selected';
     }
     const selectedOption = this.options.find(option => option.label === this.value);
     return selectedOption.label;
  }
}

and now you can do

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

the computed property will be recalculated every time one of the variables it uses changes (see here https://vuejs.org/v2/guide/computed.html#Computed-Properties)

1 Like

This is giving error.

[Vue warn]: Error in render: “TypeError: Cannot read property ‘label’ of undefined”

Solved the problem.

this.options.find(option => option.value === this.value);