Question

我正在使用刀片模板和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 ...

我想念什么？

Answer 1

您不要在Vue 2的属性内部使用插值（abstract class Student { abstract void Exam(); } class Exam extends Student{ Exam(){ System.out.println("Total marks=500"); } } class Main { public static void main(String args[]){ Exam ex = new Exam(); } }）。

您可以改为绑定表达式：

topSubPane.getChildren().addListener(new ListChangeListener()
    {

        @Override
        public void onChanged(Change c)
        {
            c.next();

            topSubPane.setPrefHeight(topSubPane.getHeight() + 50);

        }
    });

这只是将字符串与串联绑定。

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

1 个答案: