Vue + Asp.Net MVC - 在 cshtml 属性中使用 vue mustache

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