常連

### 実現したいこと

プルダウンの左側にアイコン
プルダウンの上にラベルを配置したい


### 前提
vuetifyもしくはvueを使用する。
上記不可能であればHTMLやCSSを使用する
アイコン：MaterialDesignIcons


### 発生している問題・エラーメッセージ

```
アイコンの上にラベルが配置されてしまう
```
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-11-30/74dc96bb-50e9-4540-a44c-ab09896cfc49.png)
### 該当のソースコード

```vuetify
 <v-row>
              <v-col cols="auto">
                <v-icon>mdi-calendar</v-icon>
              </v-col>
              <v-col>
                <div class="text-subtitle-1">ラベル</div>
                <v-select
                  v-model="selectedItem"
                  :items="selectItems"
                  prepend-icon="mdi-calendar"
                ></v-select>
              </v-col>
            </v-row>
```





### 補足情報（FW/ツールのバージョンなど）
vuetify 3.x
vue3.x
ここにより詳細な情報を記載してください。


vuetifyでプルダウンのレイアウトを変更したい

### 実現したいこと

- [ ] Vutifyを用いたアプリケーションのモックを作成しています。
- [ ] 左側にサイドメニューが表示され、中央に入力フォームを表示したいと考えています。

### 前提

HTML、CSSとも本当に初心者で、仕事の関係で最近勉強を開始しました。
Vutifyを用いてアプリケーションのモックを作成する必要があるのですが、想定した表示になりません。
実現したいところにも記載した通り、左側にナビゲーションメニュー、中央に簡単な入力フォームを作成したいと考えています。

### 発生している問題・エラーメッセージ
下記ソースコードを表示したところ、左側のナビゲーション部分と中央の入力フォームの間にスペースが生じています。
このスペースを埋めて、左詰めで表示させるにはどのようにしたら良いでしょうか。

### 該当のソースコード
基本的にVutifyの公式サイトにあるソースを利用しています。

```ここに言語名を入力
<template>
  <div class="container">
    <div class="navigation ma-0 pa-0">
      <v-app>
        <v-navigation-drawer :width="180">
          <v-list-item title="Application" subtitle="Application"></v-list-item>
          <v-divider></v-divider>
          <v-list-item link title="Application-A"></v-list-item>
          <v-list-item link title="Application-B"></v-list-item>
          <v-list-item link title="Application-C"></v-list-item>
        </v-navigation-drawer>
      </v-app>
    </div>
    <div class="form ma-0 pa-0">
      <v-app>
        <form @submit.prevent="submit">
          <v-text-field
              v-model="name.value.value"
              :counter="10"
              :error-messages="name.errorMessage.value"
              label="Name"
          ></v-text-field>
          <v-text-field
              v-model="phone.value.value"
              :counter="7"
              :error-messages="phone.errorMessage.value"
              label="Phone Number"
          ></v-text-field>

          <v-text-field
              v-model="email.value.value"
              :error-messages="email.errorMessage.value"
              label="E-mail"
          ></v-text-field>

          <v-select
              v-model="select.value.value"
              :error-messages="select.errorMessage.value"
              :items="items"
              label="Select"
          ></v-select>
          <v-checkbox
              v-model="checkbox.value.value"
              :error-messages="checkbox.errorMessage.value"
              label="Option"
              type="checkbox"
              value="1"
          ></v-checkbox>

          <v-btn
              class="me-4"
              type="submit"
          >
            submit
          </v-btn>

          <v-btn @click="handleReset">
            clear
          </v-btn>
        </form>
      </v-app>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import { useField, useForm } from 'vee-validate'

const { handleSubmit, handleReset } = useForm({
  validationSchema: {
    name (value) {
      if (value?.length >= 2) return true

      return 'Name needs to be at least 2 characters.'
    },
    phone (value) {
      if (value?.length > 9 && /[0-9-]+/.test(value)) return true

      return 'Phone number needs to be at least 9 digits.'
    },
    email (value) {
      if (/^[a-z.-]+@[a-z.-]+\.[a-z]+$/i.test(value)) return true

      return 'Must be a valid e-mail.'
    },
    select (value) {
      if (value) return true

      return 'Select an item.'
    },
    checkbox (value) {
      if (value === '1') return true

      return 'Must be checked.'
    },
  },
})
const name = useField('name')
const phone = useField('phone')
const email = useField('email')
const select = useField('select')
const checkbox = useField('checkbox')

const items = ref([
  'Item 1',
  'Item 2',
  'Item 3',
  'Item 4',
])

const submit = handleSubmit(values => {
  alert(JSON.stringify(values, null, 2))
})
</script>

<style>
.container{
  display: flex;
}
.navigation{
  width: 25%;
}
.form{
  width: 50%;
}
</style>
```

### 試したこと

styleの部分を色々変更したのですが、うまくいかず…。

### 補足情報（FW/ツールのバージョンなど）

Vueのバージョンは下記の通りです。
@vue/cli 5.0.8



Vuetifyを用いて作成した画面にスペースが生じる

Vue.js初心者です。

axiosを使用して通信するところでエラーが出てしまいます。
```ここに言語を入力
Access to XMLHttpRequest at 'http://test.com/' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.
```

調べると結構出てきたので、試してみましたが上手くいきませんでした。
自分の理解が低く、理解できないところもありました。
https://qiita.com/Ryoma0413/items/c41d10d2e6e2a420c3cf
https://qiita.com/att55/items/2154a8aad8bf1409db2b#simple-request-%E3%81%A8-preflight-request-%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6
https://b1tblog.com/2019/11/03/vue-axios/
https://developer.mozilla.org/ja/docs/Web/HTTP/CORS
https://teratail.com/questions/140784

```vue
<script>
import axios from 'axios';

export default {
  data() {
    return {
      term: '',

    }
  },
  methods: {
    async exe() {
      this.$emit('loadStart')
      const headers = {'Access-Control-Allow-Origin': '*'}
      const { data } = await axios.get('//test.com/', {headers});
      this.$emit('loadComplete', { results: data.results})
    }
  }
}
</script>
```

試した事
```ここに言語を入力
import axios from 'axios';
axios.defaults.headers.get['Access-Control-Allow-Origin'] = '*'
```
vue.config.jsを作成して
https://qiita.com/Ryoma0413/items/c41d10d2e6e2a420c3cf
```ここに言語を入力
module.exports = {
  devServer: {
    proxy: {
      "/api/": {
        target: "http://localhost:8080",
      }
    }
  }
};

vueのファイル
/api/を追加
const headers = {'Access-Control-Allow-Origin': '*'}
const { data } = await axios.get('/api/test.com/', {headers});

↓
404 (Not Found)
設定がうまう行ってないのか
```
dataに設定してthis.で呼び出し
https://teratail.com/questions/140784
```ここに言語を入力
export default {
  data() {
    return {
      term: '',
      headers: {
        'Content-Type': 'application/json;charset=UTF-8',
        'Access-Control-Allow-Origin': '*',
      }
    }
  },
  methods: {
    async exe() {
      this.$emit('loadStart')
      const { data } = await axios.get('//test.com/', {headers: this.headers});
      this.$emit('loadComplete', { results: data.results})
    }
  }
}

↓

Access to XMLHttpRequest at test.com from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.
```

```ここに言語を入力
web上のrequest headers
Access-Control-Allow-Origin: *の設定はされていました。
```

自分の力では解決する事ができませんでした。
どなたか知恵を貸していただきたいです。

よろしくお願いします。

vue/cli 4.3.1

Vue.jsでaxiosを使った通信でCORS policyで止められる

### 前提・実現したいこと

vue.jsでwebシステムの開発を行っています。
昨日からnpm run serveを実行すると下記のエラーが表示されます。
何かわかることがあればご指摘お願い致します。

### 発生している問題・エラーメッセージ

```
'vue-cli-service' は、内部コマンドまたは外部コマンド、
操作可能なプログラムまたはバッチ ファイルとして認識されていません。
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! reportsystem@0.1.0 serve: `vue-cli-service serve`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the reportsystem@0.1.0 serve script.
npm ERR! This is probably not a problem with npm. There is likely additional log
ging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Demo\AppData\Roaming\npm-cache\_logs\2019-10-25T08_39_37_0
12Z-debug.log
```

### 該当のソースコード

```
ソースコード
```

### 試したこと

思い当たることとして直前に copy-webpack-plugin のインストールを行っていたため当該プラグインの削除を行いました。
またnode.jsとnpmのバージョンアップを行ってみました。
node.js : 10.16.0 → 12.13.0
npm : 4.0.5 → 6.12.0

### 補足情報（FW/ツールのバージョンなど）
package.jsonは以下の通りです。

{
  "name": "reportsystem",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^2.6.5",
    "element-ui": "^2.4.5",
    "firebase": "^6.2.0",
    "firebase-admin": "^8.3.0",
    "moment": "^2.24.0",
    "vue": "^2.6.10"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.8.0",
    "@vue/cli-plugin-eslint": "^3.8.0",
    "@vue/cli-service": "^3.8.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "vue-cli-plugin-element": "^1.0.1",
    "vue-template-compiler": "^2.6.10",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.9"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

npm run serveでエラーになる

vue.jsでvueCLIで新しくファイルを作り、viewsという階層にNew.vueというコンポーネントファイルを作ったらエラーになりました。

views
→AboutView.vue
→HomeView.vue
→**New.vue**

エラー内容は
Component name "New" should always be multi-word  vue/multi-word-component-names
という内容です。

以下がindex.jsファイルです。

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  },
  {  
    path: '/new',
    name: 'new',
    component: () => import(/* webpackChunkName: "new" */'../views/New.vue')
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

わかる方ご教授お願いします。

vueCLIで作ったファイルで、viewsという階層に新しくNew.vueというコンポーネントを作ったらエラーがでました。

### 実現したいこと

vue3でComposal Functionを利用して、関数を外部ファイルにして共通化しようとしたところ、
デプロイ(npm run serve)時に、エラーが発生してしまい、解決できません。

グローバル関数を作りたいです。

### 前提

vueのその他コンポーネントファイルは期待通りに動きます。
Vue CLI vue@3.3.4
webpack@5.88.1

### 発生している問題・エラーメッセージ

エラーメッセージ
```webpack
「Cannot read properties of undefined (reading '__vccOpts')
TypeError: Cannot read properties of undefined (reading '__vccOpts')
    at exports.default (webpack-internal:///./node_modules/vue-loader/dist/exportHelper.js:9:22)
    at eval (webpack-internal:/// ～ローカルファイル名のため略～」

```

### 該当のソースコード

関数ファイルたコード
```vue.js
<script>    
import { onMounted } from 'vue'
export function useTestFunction() {
    onMounted(()=>{
        console.log('test');
    })
    return 'test';
}
</script>
```

関数の読み込み側のコード
```vue.js
<template>
test page
</template>
<script setup>
import {useTestFunction} from '../ファイルパス';
const sec = useTestFunction();
console.log(sec);
</script>
```

### 試したこと

エラーメッセージに表示されている、「'__vccOpts'」が何なのかわからず、
調べてみたのですが、型？なのか、原因がわからずにおります。

### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。


Vue3でコンポーザブル関数を作りたいが、エラー「Cannot read properties of undefined (reading '__vccOpts')」が解決できない

Vue-cliで開発する学習をしているのですが、ローカルサーバーが起動しなくなりました。
以下に試したことを記載します。
解決策をご存知の方、アドバイスいただけると幸いです。

## 試したこと
```bash
yarn serve
yarn run v1.15.2
$ vue-cli-service serve
 INFO  Starting development server...
 98% after emitting CopyPlugin 
```
上記のyarnコマンドでyarnを起動しようとすると以下のエラーが表示されます。

### エラー表示
```bash
 ERROR  Failed to compile with 1 errors                                                                       23:05:27

This dependency was not found:

* core-js/modules/es6.function.name in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/
lib!./node_modules/vuetify-loader/lib/loader.js!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-l
oader/lib??vue-loader-options!./src/App.vue?vue&type=script&lang=js&

To install it, you can run: npm install --save core-js/modules/es6.function.name
^C
MacBook-Pro:practice_vue_firebase user$ npm install --save core-js/modules/es6.function.name
npm ERR! code ENOLOCAL
npm ERR! Could not install from "core-js/modules/es6.function.name" as it does not contain a package.json file.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/user/.npm/_logs/2019-04-17T14_05_46_073Z-debug.log

```

npmをインストールしてくださいと表示されているので記載の「npm install --save」コマンドを実行すると、そんなファイルはないよ、みたいなエラーが表示されます。

### そのほか
・nodemoduleとpackage.jsonを一度消してみて再実行もやってみましたが事象は解決されずでした。

Vue,jsのローカルサーバーがThis dependency was not found表示で起動できない

Vue CLIを使った環境構築をしようと思い、「npm run serve」で立ち上げるところまではできたのですが、その後終了する方法がわかりません。

[Cmd + C]などは試したのですが、終了してくれない状況です。

どなたかご存知の方、ご教示いただけましたら幸いです。m(_ _)m