将字符串变量从 Django 传递给 Vuejs 方法

Question

我在 html 中将参数从 Django 传递到 Vue 方法：

# Django view
context = {
    'var1': var1,
}

<!-- html -->
<div>
  <p>Display var1: {{var1}}</p>
  <button @click.prevent="doThis({{var1}})">Do This</button>
</div>

<!-- html result below
Display var1: value_of_var1
-->

以上完美运行，但是 doThis({{var1}}) 给出错误。

// Vue method
method: {
  doThis(var1){
    console.log(var1)
  }
}

我在控制台中得到以下信息：

undefined
...[Vue warn]: Property or method "value_of_var1" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

我做错了什么？

当我将变量传递给方法时，如何出现上述错误？

Answer 1

我无法弄清楚上面发生了什么，但我找到了解决方法。我让var1显示在html然后添加了display:none的样式。然后我使用 javascript 来获取我的 vuejs 文件中的内容：

<!-- html -->
<div>
  <p id="get_var1" style="display: none;">{{var1}}</p>
  <button @click.prevent="doThis()">Do This</button>
</div>

// Vue method
method: {
  doThis(){
    let var1 = document.getElementById("get_var1").textContent
    console.log(var1)
  }
}

// Console:
// Value_of_var1

请注意，这没问题的唯一原因是这不是敏感信息或机密信息。

Answer 2

我上面的第一个答案有效，所以我离开了。然而，对于我想要的目的来说，它并不是最佳的。 Estradiaz 的评论正是我所需要的。我的代码中缺少引号 ''。将字符串传递给方法时需要这样做。所以解决方案是：

<!-- html -->
<div>
  <p>Display var1: {{var1}}</p>
  <button @click.prevent="doThis('{{ var1 }}') ">Do This</button> 
</div>

将字符串变量从 Django 传递给 Vuejs 方法

Pass string variable from Django to Vuejs method

vue.js

vuejs3