格式化要在 Vue.js 組件中使用的 Laravel 路由字符串

Question

我正在將數據從刀片文件傳遞到 Vue 組件。 我將程序集合傳遞給 Vue，程序集合中是一個數組，數組中是屬性。 屬性之一是route屬性。 由於路由來自 Laravel 而不是 vue 路由器，（我沒有使用 vue-router）路由附加了刀片文件擴展名，因為它會在返回視圖時在控制器中使用：所以路由的方式現在在我的 Vue 組件中返回類似於：

route: program1.index,
       program2.index
       program3.index

在我的 index.blade.php 文件中，我綁定了程序並將其傳遞給 vue：

<programs :programs="{{App\Programs::all()}}">
 </programs>

在 Programs.vue 中，我使用v-for循環遍歷程序並正確訪問路由，如下所示：

   <template>
        <div>
          <a :href="program.route"></a>
        </div>
    </template>

我正在使用這個計算屬性，它正確地從路由中剝離了.index ，但是當我在 vue 控制台中檢查formattedRoutes的值時，它是未定義的。

computed: {
     formattedRoutes() {
      this.programs.filter(obj => {
        return obj.route.replace(/\.[^/.]+$/, "");
      });
    }
}

這是我在 html 中調用計算屬性：

 <template>
    <div>
       <a :href="program.formattedRoutes"></a>
    </div>
 </template>

program.formattedRoutes返回undefined我不知道為什么。

Answer 1

這里有兩個問題...

1. 您的計算屬性不返回任何內容
2. 計算屬性應該是純函數。 它們不應該操作任何數據，否則您可能會陷入無限循環，因為計算屬性函數會在數據更改時執行

相反，我會創建一個計算屬性來返回帶有轉換后的路由的程序。 例如

computed: {
  linkedPrograms: vm => vm.programs.map(program => ({
    ...program,
    route: program.route.replace(/\.\w+$/, "")
  }))
}

現在迭代linkedPrograms而不是programs並在鏈接中使用轉換后的route屬性。 例如（這純粹是猜測工作，因為您沒有展示您如何在模板中迭代programs ）...

<!-- I'm just guessing with the "id" and "name" properties -->
<div v-for="program in linkedPrograms" :key="program.id">
  <a :href="program.route">{{ program.name }}</a>
</div>