Nuxt•8mo ago

Regex not working from prop

When I pass format as a prop it doesn't work. But when I pass it as a local value with the exact same regex is do work:

// This doesn't work
// props.format = '^(?=.*\\d).{8,}$'

<script setup>
    const props = defineProps(['format', 'message', 'value']);

    function checkValid(){
        if (!props.format || !props.value) {
            return true;
        }

        const regex = new RegExp(props.format);
        console.log(regex.test(props.value))
        return regex.test(props.value);
    }
</script>

// This doesn't work
// props.format = '^(?=.*\\d).{8,}$'

<script setup>
    const props = defineProps(['format', 'message', 'value']);

    function checkValid(){
        if (!props.format || !props.value) {
            return true;
        }

        const regex = new RegExp(props.format);
        console.log(regex.test(props.value))
        return regex.test(props.value);
    }
</script>

// This do work

<script setup>
    const props = defineProps(['format', 'message', 'value']);

    const example = '^(?=.*\\d).{8,}$';

    function checkValid(){
        if (!props.format || !props.value) {
            return true;
        }

        const regex = new RegExp(example);
        console.log(regex.test(props.value))
        return regex.test(props.value);
    }
</script>

// This do work

<script setup>
    const props = defineProps(['format', 'message', 'value']);

    const example = '^(?=.*\\d).{8,}$';

    function checkValid(){
        if (!props.format || !props.value) {
            return true;
        }

        const regex = new RegExp(example);
        console.log(regex.test(props.value))
        return regex.test(props.value);
    }
</script>

3 Replies

Cesxhin•8mo ago

try use toRefs. Example:

const props = defineProps({
  test:{
    type: string,
    default: "hello"
  }
});

const {test} = toRefs(props);

console.log(test.value);

const props = defineProps({
  test:{
    type: string,
    default: "hello"
  }
});

const {test} = toRefs(props);

console.log(test.value);

Techno1MonkeyOP•8mo ago

Could you be a little more specific? I'm trying something like this but this doesn't work:

<script setup>
    const props = defineProps(['format', 'message', 'value']);

    const { test } = toRefs(props.format);

    function checkValid(){
        if (!props.format || !props.value || (props.value.length < 4)) {
            return true;
        }

        const regex = new RegExp(test);
        console.log(regex.test(props.value))
        return regex.test(props.value);
    }
</script>

<script setup>
    const props = defineProps(['format', 'message', 'value']);

    const { test } = toRefs(props.format);

    function checkValid(){
        if (!props.format || !props.value || (props.value.length < 4)) {
            return true;
        }

        const regex = new RegExp(test);
        console.log(regex.test(props.value))
        return regex.test(props.value);
    }
</script>

Alright so I got it working, but it still always return false...

<script setup>
    const props = defineProps(['format', 'message', 'value']);

    const { format } = toRefs(props);

    function checkValid(){
        if (!props.format || !props.value || (props.value.length < 4)) {
            return true;
        }

        const regex = new RegExp(format.value);
        console.log(regex.test(props.value))
        
        return regex.test(props.value);
    }
</script>

<script setup>
    const props = defineProps(['format', 'message', 'value']);

    const { format } = toRefs(props);

    function checkValid(){
        if (!props.format || !props.value || (props.value.length < 4)) {
            return true;
        }

        const regex = new RegExp(format.value);
        console.log(regex.test(props.value))
        
        return regex.test(props.value);
    }
</script>

Cesxhin•8mo ago

Please send all code of component

Gaming

Programming

Regex not working from prop