1つのvueで新規登録、編集など行う際、通ってきたルートによってボタンを表示させたり、非表示にしたりする方法。
（今回の例）
・会社データ新規登録の際は「アカウント発行」ボタンは非表示にしたい
・既に会社データ登録済の場合は編集画面に「アカウント発行」ボタンを表示させておきたい
<script setup>
const company = usePage().props.company;
const select_company = usePage().props.select_company;
var postUrl = null;
if (select_company && select_company.id) postUrl = route('user.company.list', {select_company: select_company});
else postUrl = route('user.company');
if (company && company.id) postUrl = postUrl+'/'+company.id
else postUrl = postUrl+'/add'
console.log(postUrl)
// companyとselect_companyが存在し、それぞれのidが存在する場合に[true]を返し、
// そうでない場合には[false]を返す関数を定義する
function shouldShowcreateaccount(){
return company && company.id && select_company && select_company.id;
}
// その[true]か[false]かをshouldShow変数に格納する
const shouldShow = shouldShowcreateaccount();
// ボタン押された時にダイアログ表示。OKならそのルートに飛ぶ→コントローラーに飛ぶ
function createAccountButton(){
if(confirm("企業アカウントを作成しますがよろしいでしょうか？企業メール宛にパスワードを発行します。
\n※既にアカウント発行済、パスワード設定済みの場合も再設定されます。")){
let url = null;
url = postUrl + '/create_account';
router.get(url);
}
}
</script>
<template>
// v-ifでtrueなら表示されるし、falseなら表示されなくなる。
// 他にもボタンが多数あるためpreventつけてる。
<PrimaryButton
v-if="shouldShow" @click.prevent="createAccountButton">アカウント発行
</PrimaryButton>
</template>
