将 Vue.js 中一行的一些变量作为参数传递给 vue.js 方法并使用 axios 发送出去答案

【问题标题】：pass some variable of a row in Vue.js as parameters to vue.js method and send out using axios将 Vue.js 中一行的一些变量作为参数传递给 vue.js 方法并使用 axios 发送出去
【发布时间】：2021-09-16 21:46:05
【问题描述】：

我有一个网络应用程序，使用 Django 作为后端，使用 Vue.js 作为前端。在单元格中，这是每一行的一个按钮，它应该在单击后获取该行的详细信息。所以我想将Vue.js中一行的一些变量作为参数传递给Vue.js方法。

但我没有这样做，当我尝试点击按钮时，它总是提交表单，但我已经添加了 type="button"。

                <tbody>
            <tr v-for="(row, index) in filteredRows" :key="`isbn-${index}`">
                <td name="`title_${index}`" v-html="highlightMatches(row.title)">{{ row.title }}</td>
                <td v-html="highlightMatches(row.author)">{{ row.author }}</td>
              
               <td><button type="button" v-on:click="greet( $event, {{ row.title }})">Greet</button></td>
                <td name="`discipline_code_course_code_${index}`"  bgcolor= "white"><div contenteditable></div></td>
                          </tr>
            </tbody>

<script>
             const app = new Vue({
        el: '#app',
        data:() => ({
            filter: '',
            rows: book_rows
        }),

        methods: {
                      greet: function (event, title) {
                alert(title);   #undefined when debug
                this.$http.post(
    '/check_code/',
    { title: title }
  );

}

        },
</script>

如何将 Vue.js 中一行的一些变量作为参数传递给 Vue.js 方法并使用 axios 发送出去？

【问题讨论】：

你应该使用@click 或 v-on:click 来处理事件，而不是 vue 中的 onclick。你能试试这个吗？
我试过了，但是这种情况下ajax不能工作
您是否使用了后端模板语言，例如 django 或 Jinja 模板，这会在您的 Vue JS 使用它们之前剥离 {{ bracketed }} 定义？
我使用 django 作为后端
代码 v-on:click="greet( $event, {{ row.title }})" 可能需要检查，就好像那是你的标题 - 你在上面的行中应用它略有不同：v-html="highlightMatches(row.title)。如果是后端 var，则需要语音标记 - 如果是前端，请删除我认为的括号

标签： javascript django vue.js

【解决方案1】：

您需要使用verbatim 标签，以确保 django 在 JS 使用它们之前不会剥离模板中的这些属性：https://docs.djangoproject.com/en/3.2/ref/templates/builtins/#verbatim

用逐字标记包装你的 JS 模板（当前在你的 django 提供的 HTML 文件中），以确保括号中的变量不被 django 解析：

{% verbatim %}
<div>{{ app.jsVars }}</div>
{% endverbatim %}

您可以通过检查生成的 HTML 页面的源代码（右键单击查看源代码）来检查这一点 - 并且您的 JS 模板变量应该在那里。

快速注释：

代码v-on:click="greet( $event, {{ row.title }})" 可能需要检查，好像这是您的标题 - 您在上面的行中应用它略有不同：

v-html="highlightMatches(row.title)

如果是后端var，需要speech-marks：

v-on:click="greet( $event, '{{ row.title }}')"

【讨论】：