Vue + Asp.Net MVC - Using vue mustache in cshtml attributes

Question

As we know from Vue's documentation we can use vue mustaches to acces properties also inside of html element's attributes

But for some reason I can't make this work in .net's .cshtml pages

heres simple example (for ui I am using Element-UI library):

<el-table :data="tableData"
      row-key="Id">
    <el-table-column prop="Price"
                     label="Standard">
        <template slot-scope="props">
            <span v-if="edit == false">{{ props.row.Price }}</span> @*this is working*@
            <div v-if="edit == true">
                <input id="price-{{ props.row.Id }}" type="text" v-model="props.row.Price">@*v-model works but id not*@
            </div>
        </template>
    </el-table-column>
</el-table>

Output in source code says that Id of input element is price-{{ props.row.Id }} , but should be for example price-1

Do you have any suggestions for me?

Answer 1

I think you are trying to bind row.id to textbox id attribute. You should do it like below.

<input v-bind:id="props.row.Id" customeAttr="price" type="text" v-model="props.row.Price">

OR you can change your model data to have a get property which can return custom string like 'price-' + id.

{
  id: 1,
  price: 10,
  get customId() {        
    return 'price-' + this.id;
  }      
}

Detailed Example