U프론트
105
2021-07-22 15:16:13 작성 2021-07-22 15:21:48 수정됨
6
138

Vue 기존 배열 데이타 값 중간에 "-"을 추가하려면... 도와주세요!!


안녕하세요! Vue프로젝트로 하는 중인데 중간에 막힘이 있어서 구글검색을 해봐도 잘되지 않아서 도움을

요청드립니다!! 도와주세요 선배님 고수님 ㅠㅠ

tel이라는 데이터(전화번호)에 중간에 "-"(하이픈)을 삽입을 해야하는데요!
현재 tel에는 ["0212341234"]로 되어있습니다.
ex) 02-1234-1234
splice를 이용해서 해보려고 했는데 잘 되지 않습니다.. ㅠㅠ
어떻게 해야 값을 변경할수 있는지 잘모르겠습니다.!

<script>
import axios from 'axios';

export default {
  data: () => {
    return {
      item : "",
      name : 'null',
      imagePathList: [],
      alarmKeywordList: [],
      homepageUrl : "",
      tel : [],
      addrRoad: "",
      addrJibun: "",
      addrEtc: "",
      lat:"",
      lon:"",
      currentNumber: 0,
    }
  },
  created: function () {
    axios.get('../../api/company.json')
      .then(response => {
        this.item = response.data.data
        this.name = response.data.data.name
        this.imagePathList = response.data.data.imagePathList
        this.alarmKeywordList = response.data.data.alarmKeywordList
        this.homepageUrl = response.data.data.homepageUrl
        this.tel = response.data.data.tel
        this.addrRoad = response.data.data.addrRoad
        this.addrJibun = response.data.data.addrJibun
        this.addrEtc = response.data.data.addrEtc
        this.lat = response.data.data.lat
        this.lon = response.data.data.lon
      })
      .catch(err => console.log(err))
  },
  methods: {
    telHyphen: () => {
      return this.tel.splice(2,0,"-");
    }
  }
};
</script>


<template>
      <div>
        <p>{{ tel }}</p>
       <p>{{ telHyphen }}</p>
      </div>
    
</template>
0
  • 답변 6

  • 깡수수
    129
    2021-07-22 15:38:36
  • 추다닥
    179
    2021-07-22 15:46:40

    return this.tel.replace(/(^02.{0}|^01.{1}|[0-9]{3})([0-9]+)([0-9]{4})/,"$1-$2-$3");

  • U프론트
    105
    2021-07-22 15:50:27

    추다닥  말씀하신대로  해보았는데.. 렌더링시 표현되지않는데.. 어떻게 해야 할까요?

      methods: {
        telHyphen: () => {
          return this.tel.replace(/(^02.{0}|^01.{1}|[0-9]{3})([0-9]+)([0-9]{4})/,"$1-$2-$3");
        }
      }
  • U프론트
    105
    2021-07-22 15:54:27

    깡수수  해당글 참조 하여 사용해보았는데 안되네요...ㅠㅠ

      telHyphenfunction() {
        if (this.tel.length === 11{
          this.tel = this.tel.replace(/(\d{3})(\d{4})(\d{4})/, "$1-$2-$3");
        } else if (this.tel.length === 8{
          this.tel = this.tel.replace(/(\d{4})(\d{4})/, "$1-$2");
        } else {
          if (this.tel.indexOf("02"=== 0{
            this.tel = this.tel.replace(/(\d{2})(\d{4})(\d{4})/, "$1-$2-$3");
          } else {
            this.tel = this.tel.replace(/(\d{3})(\d{3})(\d{4})/, "$1-$2-$3");
          }
        }
        return this.tel
      }
  • 20170923
    2k
    2021-07-22 15:58:33

    해당 로직만 실행해봤을땐 잘 되는데용

    데이터의 문제거나 값이 제대로 전달되지 않거나 그런 문제 아닐까요?

  • U프론트
    105
    2021-07-22 16:15:27

    추다닥 이렇게 하니깐 되네요! 감사합니다!!

     computed: {
        telHyphen: function () {
           return this.tel.replace(/(^02.{0}|^01.{1}|[0-9]{3})([0-9]+)([0-9]{4})/,"$1-$2-$3");
        }
      }
  • 로그인을 하시면 답변을 등록할 수 있습니다.