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

Posted 2023-03-14

【中文标题】如何在 vue 组件的刀片模板中转义变量

【英文标题】：how to escape a variable in blade templates for vue components

【发布时间】：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...

我错过了什么？

【参考方案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;