如何使用VueJS在模态中复制当前行的数据？

Posted 2021-05-04

我目前正在为我的项目使用vuejs。我需要的是，当我单击表中的一行时，将显示一个模式，并根据所单击的行中的数据填写表格。但是，我的代码无法正常工作。请在下面查看我的代码。

var app = new Vue({
  el: '#roleContainer',
  data: {
      roles: [
        { display_name: 'user', description: 'user', created_at: '2020/02/20' },
        { display_name: 'mod', description: 'mod', created_at: '2020/02/21' }
      ],
      id: '',
      display_name: '',
      description: ''
  },

  methods: {
      openEditModal(role){
          $('#formModal').modal('show');
          console.log(role);
      }
  }
})

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>


<div id="roleContainer">
  <table class="table table-striped with-border">
      <thead>
          <tr>
              <th>Display Name</th>
              <th>Description</th>
              <th>Created at</th>
          </tr>
      </thead>
      <tbody>
        <tr v-for="role in roles" @click="openEditModal" class="pointer">
            <td v-text="role.display_name"></td>
            <td v-text="role.description"></td>
            <td v-text="role.created_at"></td>
        </tr>
      </tbody>
    </table>
</div>



<div class="modal fade" tabindex="-1" role="dialog" id="formModal">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				<h4 class="modal-title">Create Role</h4>
			</div>
			<div class="modal-body">
				<div class="form-group">
					<label class="control-label">Display Name</label>
					<input type="text" name="display_name" v-model="display_name" class="form-control" required>
				</div>
				<div class="form-group">
					<label class="control-label">Description</label>
					<input type="text" name="description" v-model="description" class="form-control" required>
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
				<button type="submit" class="btn btn-primary" @click="createNewRole">Save</button>
			</div>
		</div>
	</div>
</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

答案

<tr v-for="role in roles" @click="openEditModal" class="pointer">
        <td v-text="role.display_name"></td>
        <td v-text="role.description"></td>
        <td v-text="role.created_at"></td>
</tr>

这里，您应该传递参数role。例如，

@click="openEditModal(role)"

然后在openEditModal函数中，

this.display_name = role.display_name;
this.description = role.description;

希望对您有帮助

另一答案

[使用Vue指令时，表达式是在Vue的上下文中求值的，因此您无需将内容包装在{}中。

[@click只是v-on:click指令的简写，因此适用相同的规则。

根据您的情况，只需使用@click="addToCount(item.contactID)"

用此替换您的桌子主体。

  <tbody>
    <tr v-for="role in roles" @click="openEditModal(role)" class="pointer">
        <td v-text="role.display_name"></td>
        <td v-text="role.description"></td>
        <td v-text="role.created_at"></td>
    </tr>
  </tbody>