2017-12-29 59 views
1

記事とタグを持つ小さなブログアプリがあります。これまでのところ空想はありません。すべての記事は多くのタグを持つことができます。VuexとLaravel 5:記事からタグを削除するには

Laravelバックエンドは、VueフロントエンドのAxiosからのAPI呼び出しによってデータを配信します。 Laravelモデルでは、記事にはメソッドがあります。

public function tags(){ 
     return $this->belongsToMany('App\Tag'); 
    } 

(逆も同様です)。私はピボットテーブルを持っており、これらのすべてはかなり与えられた例に従いますhttps://laracasts.com/series/laravel-5-fundamentals/episodes/21 これはすべて正常に動作します。

ここで、記事とタグの間の接続を削除するメソッドdeleteTag()をVueで呼び出すとしましょう。 PHPの "addTag"は新しいTag Modelを追加し、Pivo​​tテーブル内のTagとArticle間の接続をORで連結します。

これを達成する最も良い方法は何ですか?これまで何をしている - 私

ArticleTags.vue

deleteTag(tagName){ 
      let articleId = this.articleId; 
      this.$store.dispatch('removeTagFromArticle', { articleId, tagName }); 
     }, 

index.js(Vuex店)

actions: { 
    removeTagFromArticle(context,param) { 
     axios.post('api/articles/delete-tag/', param) 
        .then((res) => { 
         let article = context.getters.getArticleById(param.articleId); 
         let tagName = param.tagName; 
         context.commit('deleteTag', {article, tagName}); 
        }) 
        .catch((err) => console.error(err)); 

    } } 

mutations : { deleteTag (state, { article, tag }) { 
     let tagIndex = article.tags.indexOf(tag); 
     article.tags.splice(tagIndex,1); 
    } } 

ArticleController.php

/** 
* Remove Tag from Article 
* 
* @param \Illuminate\Http\Request $request 
* @return \Illuminate\Http\Response 
*/ 
public function deleteTag(Request $request) 
{ 
    $tag = \App\Tag::firstOrCreate(array('name' => $request->tagName)); 
    $article = Article::findOrFail($request->articleId); 

    $result = $article->tags()->detach([$tag->id]); 

    $this->cleanUpTags(); 

    return response('true', 200); 
} 

ルート/ web.php

Route::post('api/articles/delete-tag', '[email protected]'); 

これは、これまでに動作します。コードは正確に何をすべきかを実行します。それだけ本当に不器用な感じ。おそらく複雑になるでしょう。例はシンプルだがセットアップ全体が大きいためかもしれない。それにもかかわらず私は自分のコーディングを改善しようとしています。 :)

だから私の質問は以下のとおりです。

1)は、店の代わりの情報でarticleIDにVueの中で記事のオブジェクトを渡す方が良いでしょうか?

2)Store.slice()を店舗で使用するという考えは複雑すぎるのでしょうか?これはコンポーネント内で直接行うことができます。

3)PHPでタグを削除した後、Laravelからストア全体をリロードするのは意味がありますか?

編集:誰かがこの質問を探していて、どのように私はそれを最後に解決しましたか。このアプリのソースコードはhttps://github.com/shopfreelancer/streamyourconsciousness-laravel

答えて

0

で見つけることができます。個人的に私のAPIと同じようにデータベースリソースを参照するために私のオブジェクトをjavascriptで保持するのが好きです。

はこの場合、私は、文字列の代わりにオブジェクトに私のタグを変更しているだろうと私のAPIへのタグのIDを送信します。パラメータは、私の意見では罰金の両方であるとして、オブジェクトまたはIDを使用

let article = { 
    tags: [{ id: 1, name: 'tag 1' }, { id: 2 ... }] 
} 

私の記事の例は次のようになります。私はあなたが "きれいな"コードが好きなら、IDが選択されているだけでなく、あなたのオブジェクトにIDが存在するかどうかをチェックする場所が1つだけあります。

ケース:

// Somehwere in code 
this.deleteArticle(article); 

// Somehwere else in code 
this.deleteArticle(article); 

// Somewhere else in code 
this.deleteArticle(article); 

// Function 
deleteArticle(article) { 
    // This check or other code will only be here instead of 3 times in code 
    if (!article.hasOwnProperty('id')) { 
    console.error('No id!'); 
    } 

    let id = article.id; 

    ... 
} 

は、通常、私は、彼らが最初に初期化されているコンポーネント内の変数を変更するロジックを続けるだろう。あなたが最初にthis.article = someApiData;と言う場所。削除されたタグの最終削除を処理する関数があります。

あなたは究極の世界征服のパフォーマンスを探しているなら、私はJavaScriptでタグを削除します。また、更新されたタグのリストを返信して、記事のすべてのタグをこのデータで更新し、コードを細くすることもできます。しかし、私はまだ配列から削除されたタグslice()が好きです。

これは私の意見です。あなたのチョイスは完全にうまくいきます。自分と同じように、あなたと他の人にコードを質問するのをやめてください。

+0

これらのアイデアをありがとう!この場合、タグをサーバから取得するというアイデアは、すでにうまくいきます。 – shopfreelancer

関連する問題