如何在 vue 组件的刀片模板中转义变量答案

【问题标题】：how to escape a variable in blade templates for vue components如何在 vue 组件的刀片模板中转义变量
【发布时间】：2019-01-22 07:51:32
【问题描述】：

我正在使用刀片模板和 Vue 作为前端框架构建一个 Laravel 应用程序。

在模板中，我有一个表格，我将其呈现为 Vuetify 组件：

@extends('layouts.authenticated')

@section('subMenu')
    @include('ingestion._sub-menu')
@endsection
@section('content')
 <div class="listFiles">
      <v-data-table
              :headers='@json($headers)'
              :items='@json($files)'
              class='elevation-1'>
          <template slot='items' slot-scope='props'>
              <td class='text-xs-left'>@{{ props.item.fileName }}</td>
              <td class='text-xs-left'>@{{ props.item.annotatedDateMilliseconds }}</td>
              <td class='text-xs-left'>@{{ props.item.metadataContact}}</td>
              <td class='justify-center layout px-0'>
                <a href="@{{props.item.id}}">
</a>
              </td>
          </template>
      </v-data-table>
      <v-btn id="start-source-import" icon>
        <v-icon>add_to_photos</v-icon>
      </v-btn>
  </div>
@endsection

在web.php 文件中，我指定了headers 和files 对象：

    $headers = [
        ["text" => "Filename", "value" => "fileName", "align" => "left"],
        ["text" => "Date", "value" => "processDateTime", "align" => "left"],
        ["text" => "Owner", "value" => "metadataContact", "align" => "left"],
    ];

    $files = [
        [
            "id" => "5-4cd6-8164-5a04f2dadd5c",
            "fileName" => "filename",
            "processDateTime" => "2018-08-14 10:36:15",
            "metadataContact" => "06075-CA-San_Francisco-proper",
        ],

            "id" => "6ba6-8164-5a04f2dadd5c",
            "fileName" => "filename",
            "processDateTime" => "2018-08-14 10:36:15",
            "metadataContact" => "06075-CA-San_Francisco-proper",
        ]
    ];
    return view('ingestion/queue', [
        'files' => $files,
        'headers' => $headers
    ]);

我现在遇到的问题是我无法使<a> 元素标签工作：

    <a href="/ingestion/queue/@{{props.item.id}}">

我想为表格的每一行使用不同的href，但使用该语法我会收到此错误：

- href="/ingestion/queue/{{props.item.id}}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div id="{{ val }}">, use <div :id="val">.

但是，如果我添加 v-bind:

    <a :href="/ingestion/queue/@{{props.item.id}}">

我收到以下错误：

SyntaxError: Invalid regular expression flags in
with(this){return _c('div',{attrs:{"id":"app"}},[_c('div',{attrs:{"id":"mainMenuWrapper"}},[_c('v-toolbar',{attrs:{"dark":true}},[_c('logo-geophy'),_v(" "),_c('a',{staticClass:"a-to-button...

加行一行行暗码

如果我在表格内的某处提取该代码，它会打印正确的文件 ID...

我错过了什么？

【问题讨论】：

标签： laravel vue.js laravel-blade

【解决方案1】：

您不会在 Vue 2 的属性中使用插值 ({{ }})。

您可以改为绑定表达式：

<a :href="'/ingestion/queue/' + props.item.id">

这只是用连接绑定一个字符串。

【讨论】：

【解决方案2】：

我就是这样做的。特别是当您需要按名称使用路线时。

我像这样在href 中调用一个函数

<a :href="detailUrl(props.item.id)"></a>

在方法中函数看起来像

detailUrl(id){
  return "{{route('ingestion.queue', '')}}"+"/"+id;
}

【讨论】：