Измените цель href на _self, используя Vue и CSS - PullRequest
Новая
       95

Измените цель href на _self, используя Vue и CSS

0 голосов
/ 24 апреля 2020

Я хочу заполнить данные из редактора Rich Text в мой шаблон Vue, используя v- html. Некоторые данные имеют ссылки href. Однако целью по умолчанию является _blank. Я хочу изменить цель на _self.

В разделе стилей я перепробовал все, что мог придумать, но безуспешно. Любые идеи?

Я также попробовал следующее, но это не сработало. 

    a[href="#"] { target: "_self"}


full code below

<template>
    <b-container fluid class="general-wrapper">
        <h1 class="header-title">Title</h1>
        <v-divider></v-divider>
        <div class="data-wrapper">
            <table v-for="item in sortedGeneralContent" :key="item.id">
                    <tbody>
                        <tr>
                            <td class="title">
                                {{item.name}}
                            </td>
                        </tr>
                        <tr>
                            <td class='time-stamp'>
                                Last updated: {{item.updated_at.seconds*1000|moment("MM-DD-YY")}}
                            </td>
                        </tr>
                        <tr>
                            <td v-bind:id="item.shortcut">
                                <div v-html="item.data" ></div>
                            </td>
                        </tr>
                    </tbody>
                </table>
        </div>
    </b-container>
</template>

<script src="https://cdn.jsdelivr.net/lodash/4.13.1/lodash.js"></script>

<script>

import {mapGetters} from 'vuex'  

export default {
    name: 'general',
    computed: {
            ...mapGetters([
                'getGeneralContent',
            ]),
            sortedGeneralContent: function () {
                return _.orderBy(this.getGeneralContent, 'order')
            },
        },
        options: {
            linkAttribute: {
                target: '_self',

    }
}
}
</script>

<style>
    .container-fluid{
        padding-left:0;
    }

    ol,ul{
        list-style: square;
    }



    .ql-indent-1 {
    list-style-type: circle;
    margin-left: 2em;
    }

    .ql-indent-2{
        list-style-type: disc;
        margin-left: 4em;
    }

    .time-stamp{
        font-style: italic;
        padding-bottom: 10px;
        color:gray;
    }
    .header-title{
        font-size: 3em;
        font-weight: 900;
        padding-top:20px;
    }
    .general-wrapper{
        width: 75vw;
        padding-left:10px;

    }

    .data-wrapper {
        text-align: left;
    }

    .title{
        padding-top: 10px;
        font-size: 1.5em;
        font-weight: bold;
        color: #05668d;

    }

    a[href="#"] { target: "_self"}

    @media screen and (max-width: 900px){
          .general-wrapper {
            width: 100vw;
            max-width: 400px;
            padding-left:5px;
            padding-right:px;
      }

      img{
          max-width: 350px;
          height: auto;
      }
    }

</style>
...