Question

所以我有一个用户提供的文本块，我从CMS中提取。但是，在那个字符串中是一个简单的＆＃39;它会炸掉整个字符串并返回错误。我试图找到一个解决方案，以防止Vue绊倒这个并且我撞墙了。虽然我有一种感觉，这是一件令人尴尬的事情。这是代码：

<span v-html="sidebarContent"></span>

<script>
  var app = new Vue({
    el: '#app',
    data: {
      // the content below is a representation of what is spit out by a
      // server-side rendered variable "@Html.Raw(@Model.Element("BodyCopy").Value)"
      sidebarContent: '<p>This is example text of what's being returned.</p>',
    },
  })
</script>

违规问题似乎是＆＃34;什么＆＃34;＆＃34; - 特别是撇号＆＃39;在这个词中。用户通常会返回完整的句子，这些撇号会频繁弹出，因此数据需要能够正确处理。任何想法如何实现这一目标？

还返回的错误是：＆＃34;未捕获的SyntaxError：意外的标识符＆＃34;

Answer 1

使用双引号，或正确转义字符串

sidebarContent: '<p>This is example text of what\'s being returned.</p>',

Answer 2

正如@georaldc指出的那样，我试图以错误的方式解决这个问题。问题不在于Vue，而在于我使用剃刀。

事实证明，解决方案是在我的剃刀代码上使用HttpUtility.JavscriptStringEncode。这是我应该包括的数据值：

sidebarContent: '@Html.Raw(HttpUtility.JavaScriptStringEncode(Model.Element("BodyCopy").Value))',

以下主题也有助于解决此问题：How to elegantly escape single and double quotes when passing C# string to javascript

如何处理＆＃39;用户提供的数据在vue.js中？

2 个答案: