0

我正在将一个参数从 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.

我究竟做错了什么？

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

4

2 回答 2

0

我无法弄清楚上面发生了什么，但我找到了解决方法。我让 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

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

于 2020-07-08T22:16:33.810 回答
0

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

<!-- html -->
<div>
  <p>Display var1: {{var1}}</p>
  <button @click.prevent="doThis('{{ var1 }}') ">Do This</button> 
</div>
于 2020-07-09T21:00:27.373 回答