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

Question

正如我们从 Vue 的文档中了解到的，我们可以使用 vue mustache 来访问 html 元素属性内部的属性

但由于某种原因，我无法在 .net 的 .cshtml 页面中实现此功能

这是简单的示例(对于 ui，我使用 Element-UI 库):

<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>

源代码中的输出表示输入元素的 Id 是 price-{{ props.row.Id }}，但应该是例如 price-1

你对我有什么建议吗？

Answer 1

我认为您正在尝试将 row.id 绑定(bind)到文本框 id 属性。你应该像下面这样做。

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

或者您可以更改模型数据以具有 get 属性，该属性可以返回自定义字符串，例如“price-”+ id。

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

Detailed Example