Laravel Türkiye Discord Kanalı Forumda kod paylaşılırken dikkat edilmesi gerekenler!Birlikte proje geliştirmek ister misiniz?

Laravel API Vue 3 Tags Sorunu

aghabalaguluzade

Laravelde yazdığım APİ Vue 3 te kayıt ederken vue de tagı yakalayamıyorum yazsamda hiç bir şey yazmamışım gibi input algılamıyor. Laravelde Taggable paketini kullanıyorum
Model

class Portfolio extends Model
{
    use HasFactory;
    use \Conner\Tagging\Taggable;
    
    protected $fillable = ['title', 'description', 'url', 'tags'];
}

Controller

public function store(PortfolioRequest $request)
    {
        $portfolio = Portfolio::create($request->validated());
        $tags = explode(",", $request->tags);
        $portfolio->tag($tags);
        return new PortfolioResource($portfolio);
    }

Vue

<div class="form-group">
                                            <label for="example-price-input">Taq</label>
                                            <br />
                                            <input type="text" id="example-price-input" data-role="tagsinput" name="tags" placeholder="Taq Daxil Edin..." v-model="form.tags" />
                                            <div v-if="errors && errors.tags" class="bg-red">
                                                <small style="color:red">{{ errors.tags[0] }}</small>
                                            </div>
                                        </div>

<script setup>
	import { ref } from "vue";
    import axiosClient from "../../axiosClient.js";

    const form = ref({
        'title' : '',
        'description' : '',
        'url' : '',
        'tags' : []
    });

    const errors = ref("");
    const success = ref(false);


    const savePortfolio = async () => {
    	try {
    		const formdata = new FormData();
    		formdata.append('title',form.value.title)
    		formdata.append('description',form.value.description)
    		formdata.append('url',form.value.url)
            formdata.append('tags',form.value.tags)
    		let config = 
           	{ headers: { 
            'Content-Type': "multipart/form-data; charset=utf-8; boundary=" + Math.random().toString().substr(2)
            } }
    		await axiosClient.post("portfolios",formdata,config)
    		success.value = true
    		form.value.title = ''
    		form.description = ''
    		form.value.tags = ''
    		form.value.url = ''
    	} catch(error) {
    		if(error.response.status === 422) {
                errors.value = error.response.data.errors;
           }
                errors.value = error.response.data.errors;
      }
    	}

</script>

<style scoped>
	.bootstrap-tagsinput .tag {
        margin-right: 2px;
		color: #ffffff;
        background: #2196f3;
        padding: 3px 7px;
        border-radius: 3px;
    }
    .bootstrap-tagsinput {
        width: 100%;
    }
</style>

mgsmus

aghabalaguluzade Neden modelin $fillable dizisinde tags diye bir alan var? Bu paket pivot tablo kullanıyor, etiketler ile model arasındaki ilişkiyi orada tutuyor. Bir de PortfolioResource içeriği nasıl?

aghabalaguluzade

mgsmus şöyle hocam

public function toArray($request)
    {
        return [
            'id' => $this->id,
            'title' => $this->title,
            'description' => $this->description,
            'url' => $this->url,
            'tags' => $this->tags,
            'created_at' => $this->created_at,
            'updated_at' => $this->updated_at
        ];
    }

aghabalaguluzade

mgsmus vuejste yazdığım zaman algılamıyor boş gözüküyor

mgsmus

aghabalaguluzade Modelde tags isimli bir alan olmayacak ve resource şöyle olacak:

public function toArray($request)
{
    return [
        'id' => $this->id,
        'title' => $this->title,
        'description' => $this->description,
        'url' => $this->url,
        'tags' => $this->whenLoaded('tagged', function() {
            return $this->tagged; // ya da $this->tagNames()
        }),
        'created_at' => $this->created_at,
        'updated_at' => $this->updated_at
    ];
}

public function store(PortfolioRequest $request)
{
    $portfolio = Portfolio::create($request->validated());

    $tags = explode(',', $request->input('tags'));
    
    $portfolio->tag($tags);

    $portfolio->load('tagged');

    return new PortfolioResource($portfolio);
}

aghabalaguluzade

mgsmus teşekkür ederim hocam
şöyle bir sorunda var ben vue jste yazdığım zaman tag yerine algılamıyor
şöyle
https://prnt.sc/cxPchOOz0s1U
ama ben inputtan data-role="tagsinput" kaldırdığım zaman ve normal inputa yazıpta virgül koyduğum zaman çalışıyor (örn vue,laravel,api) onu nasıl çöze bilirim.
Ve son olarak eklediğim tagları vuede nasıl göstere bilirim onun için başka resource veya controller mi yazmam lazım veya yeni axios isteği ile tagging_tags tablenı mi çekmem gerek yazdım edin lütfen

mgsmus

aghabalaguluzade Kullandığınız tag input componentinden bunu ayarlamanız lazım, yazılanları dizi olarak mı verecek yoksa virgülle ayrılmış karakter ifade olarak mı. Her ikisi şekilde de olur. Hazır bir component ise dokümanlarına bakın. Mesela şu an dizi olarak veriyorsa formdata.append sırasında mesela .join(',') ile virgülle ayrılmış ifadeye dönüştürerek de gönderebilirsiniz, bu da bir seçenek.

aghabalaguluzade Ve son olarak eklediğim tagları vuede nasıl göstere bilirim onun için başka resource veya controller mi yazmam lazım

Tag listesi diye bir şeye ihtiyacınız varsa evet, ayrı bir controller, resource, sayfa vs. gerekecek.

aghabalaguluzade yeni axios isteği ile tagging_tags tablenı mi çekmem gerek

Hayır. Tag isimli kendi modeli var. Kullandığınız paketin dokümanlarına bakın:

$tags = Conner\Tagging\Model\Tag::paginate();

aghabalaguluzade

mgsmus teşekkür ederim hocam
benim gibi sorunu olan veya merak eden arkadaşlar için şöyle yaptım ben
PortfolioController

public function index()
    {
        return PortfolioResource::collection(Portfolio::with('tagged')->get());
    }

Vuede kullandığım tag paketi

https://vue3-tags-input.netlify.app/
npm i vue3-tags-input