从普通HTML将数据注入Vue

Question

我正在尝试将Laravel中的模式外包给VUE。

详细地，我有一个元素列表，每个元素都有一个编辑按钮，这些按钮应该打开相同的模态并将该元素的ID发送到表单。

该按钮是由Blade呈现的普通html。模态是VUE组件。

我的问题是：这是正确的方法还是应该怎么做？

因为我不想重写整个应用程序，所以另一个选择是使用Blade显示模式并编写一些自定义JS。

按钮：

<button title="Projekt bearbeiten" class="btn btn-outline-primary float-right ml-1" data-toggle="modal" data-target="#project-edit"><i class="material-icons">edit</i></button>

模式：

<template>
  <div class="modal fade" id="project-edit" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Projekt bearbeiten</h5>
        </div>
        <form @submit.prevent="submit">
          <div class="modal-body">
            <input class="id" type="hidden" name="id" v-model="fields.id" />
            <div
              v-if="errors && errors.id"
              class="alert alert-danger"
              role="alert"
            >Ein Fehler ist aufgetretten.</div>
            <div class="form-group">
              <label for="name">Projektname</label>
              <input
                name="name"
                type="text"
                class="form-control"
                placeholder="Projektnamen eingeben"
                maxlength="50"
                v-model="fields.name"
                required
              />
              <div v-if="errors && errors.name" class="text-danger">{{ errors.name }}</div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Schließen</button>
            <button type="submit" class="btn btn-primary">Speichern</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>
<script>
export default {
    data() {
      return {
        fields: {},
        errors: {},
        success: false,
        loaded: true,
        action: '',
      }
    },

    methods: {
      addField($name, $value){
        fields[$name] = $value;
      },
      submit() {
        if (this.loaded) {
          this.loaded = false;
          this.success = false;
          this.errors = {};
          axios.post(this.action, this.fields).then(response => {
            this.fields = {}; //Clear input fields.
            this.loaded = true;
            this.success = true;
            if (response.status === 200) {
              location.reload();
            }
          }).catch(error => {
            this.loaded = true;
            if (error.response.status === 422) {
              this.errors = error.response.data.errors || {};
            }
          });
        }
      },
    },
  }
</script>

我已经搜索了一些最佳实践，但是没有发现类似的问题。

谢谢。