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

【问题标题】：Pass string variable from Django to Vuejs method将字符串变量从 Django 传递给 Vuejs 方法
【发布时间】：2020-10-27 20:11:30
【问题描述】：

我正在将一个参数从 Django 传递给我的 html 中的 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.

我做错了什么？

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

【问题讨论】：

doThis(var1) - 没有 {{}}
嘿@Estradiaz 我正在使用 {{}} 因为我从 Django 传递值 - 它使用 jinja2 模板语言。另外，我将我的 Vue 分隔符设置为 [[ ]]
当 var1 的值为“1”时一切正常。问题可能是因为字符串的长度吗？
嗯，好的 - '{{var1}}' 应该这样做，否则你尝试访问变量，但你想传递字符串
嘿@Estradiaz 它工作了\o/谢谢。请发帖让我接受

标签： vue.js vuejs3

【解决方案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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：