使用 VueJS 和 Laravel 的 Textarea v-model 初始值

Posted 2023-03-14

【中文标题】使用 VueJS 和 Laravel 的 Textarea v-model 初始值

【英文标题】：Textarea v-model initial value with VueJS and Laravel

【发布时间】：2018-09-20 21:42:29

【问题描述】：

我想使用刀片语法将用户名显示为 Markdown 编辑器的默认文本区域值。

<textarea v-model="message">
       $detailsFromLaravelContoller 
</textarea>
<div v-html="compiledMarkdown"></div>

但我正在使用 v-model 组件作为 textarea 需要 declare message with an empty value 像这样

window.onload = function()
 
    var editor = new Vue(
    el: '#editor',
    data: 
        message: '',
        compiledMarkdown: marked('',  sanitize: true ), 
    ,
    watch: 
        markdown: function () 
          this.compiledMarkdown = marked(this.message,  sanitize: true )
        
      , 
      methods: 

      
  )  

这会使用 laravel 变量的值渲染屏幕。但是很快页面加载后内容消失了（我猜我使用的是 window.onload）。 另外我没有使用 inline VueJS。 P.S：我是 VueJS 和 Laravel 的新手，ma​​rkdown 的来源 是 here(jsfiddle)提前致谢！！！

【问题讨论】：

even with an empty value

是的。页面加载后不久，textarea 值消失。通过重复重新加载页面，我注意到内容正在呈现，但在屏幕加载后立即被删除。

【参考方案1】：

您正在尝试将 php 变量值传递给单独的 javascript 文件。

我会这样做：

声明一个全局变量detailsFromLaravelContoller将$detailsFromLaravelContoller存储为字符串值

<script>
    var detailsFromLaravelContoller = @json($detailsFromLaravelContoller);
</script>
<textarea v-model="message">
</textarea>

在 Javascript 文件中使用全局变量

data: 
    message: detailsFromLaravelContoller,
,

https://jsfiddle.net/jacobgoh101/0dzvcf4d/9954/

【讨论】：

是' $detailsFromLaravelContoller ' 和!! $detailsFromLaravelContoller!!; 一样吗？

@SebastienD 我已将其更改为 !! $detailsFromLaravelContoller!! .我知道php，但我真的不知道laravel。这个SO answer 使用 !! !!，所以我现在关注它。很抱歉造成混乱。

感谢您的回答。它有帮助，但只有当 detailsFromLaravelController 从控制器分配了一个字符串值我要分配的是像这样的降价语法'！[在此处输入图像描述] [1] [1]：pbs.twimg.com/media/DZZSOKXUMAEPXbD.jpg'这会引发错误无效或意外令牌这种情况我该怎么办。我知道这个问题不在主题范围内，但非常感谢您提供解决方案

根据@SebastienD 的建议更新了答案。 json_encode 应该可以帮助您转义 markdown 中使用的特殊字符。

这有助于逃脱非法字符。非常感谢

【参考方案2】：

你可以用你的 laravel 变量初始化数据中的v-model。

window.onload = function()
 
    var editor = new Vue(
    el: '#editor',
    data: 
        message: !! $detailsFromLaravelContoller !!,
        compiledMarkdown: marked('',  sanitize: true ), 
    ,
    watch: 
        markdown: function () 
          this.compiledMarkdown = marked(this.message,  sanitize: true )
        
      , 
      methods: 

      
  )  

【讨论】：

这个看起来有点靠谱，因为在模板中使用脚本标签时 VueJS 给了我一个警告。我会尝试这两个答案，并标记让我的团队成员满意的答案。感谢您的回答。