Vuetify open drop down menu center to button

See also questions close to this topic

• How can I get toast-ui editor content?

  I am a student studying. I think I'm doing it conceptually wrong.

  I'm trying to use vue3 and type script And I'm going to use toast-ui editor.

  I get some errors.

  1. refEditor.value.invoke is not a function

  How can I get toast-ui editor content?

  this is my code

  <template>
    <div class="markup-tables flex">
      <va-card :title="$t('tables.stripedHoverable')">
        <va-card-content>
          <div id="refEditor" ref="refEditor"></div>
          <br />
          <div class="row justify--end paginationButtons-left">
            <va-button class="mr-2 mb-2">List</va-button>
          </div>
          <div class="row justify--end paginationButtons-right">
            <va-button class="mr-2 mb-2" @click="getHTML">Save</va-button>
          </div>
        </va-card-content>
      </va-card>
    </div>
  </template>
  
  <script lang="ts">
  import '@toast-ui/editor/dist/toastui-editor.css'
  
  import Editor from '@toast-ui/editor'
  import { defineComponent, onMounted, ref } from 'vue'
  
  import data from '@/data/tables/markup-table/data.json'
  
  export default defineComponent({
    name: 'BoardWrite',
    setup() {
      const refEditor = ref(null)
  
      const getHTML = () => {
        console.log('getHTML test')
        let html = refEditor.value.invoke('getHtml')
        console.log(html)
        // ERROR 
      }
  
      onMounted(() => {
        const editor = new Editor({
          el: refEditor.value,
          height: '700px',
          initialEditType: 'markdown',
          previewStyle: 'vertical',
        })
        editor.getMarkdown()
      })
  
      return {
        getHTML,
        refEditor,
      }
    },
  })
  </script>
  
• Deploy VueJS + API app to Azure Static Web App with Gitlab doesn't create functions

  I've started creating a small application that will use VueJS as a frontend with Azure Functions as the backend. I was looking at using Azure Static Web Apps to host both components for the application and Gitlab to store / deploy the app.

  Everything but the creation of the Azure functions works. Following https://docs.microsoft.com/en-us/azure/static-web-apps/gitlab?tabs=vue

  The output from the deploy step, listed below is:

  App Directory Location: '/builds/*/valhalla/valhalla-client/dist/spa' was found.
  Api Directory Location: '/builds/*/valhalla/valhalla-api/dist' was found.
  Looking for event info
  Could not get event info. Proceeding
  Starting to build app with Oryx
  Azure Static Web Apps utilizes Oryx to build both static applications and Azure Functions. You can find more details on Oryx here: https://github.com/microsoft/Oryx
  ---Oryx build logs---
  Operation performed by Microsoft Oryx, https://github.com/Microsoft/Oryx
  You can report issues at https://github.com/Microsoft/Oryx/issues
  Oryx Version: 0.2.20220131.3, Commit: ec344c058843461525ff03b46031553b6e15a47a, ReleaseTagName: 20220131.3
  Build Operation ID: |qAffRWArEg8=.deee9498_
  Repository Commit : 7cdd5b61f956e6cb8459b13a42af363c4440a97b
  Detecting platforms...
  Could not detect any platform in the source directory.
  Error: Could not detect the language from repo.
  ---End of Oryx build logs---
  Oryx was unable to determine the build steps. Continuing assuming the assets in this folder are already built. If this is an unexpected behavior please contact support.
  Finished building app with Oryx
  Starting to build function app with Oryx
  ---Oryx build logs---
  Operation performed by Microsoft Oryx, https://github.com/Microsoft/Oryx
  You can report issues at https://github.com/Microsoft/Oryx/issues
  Oryx Version: 0.2.20220131.3, Commit: ec344c058843461525ff03b46031553b6e15a47a, ReleaseTagName: 20220131.3
  Build Operation ID: |NGXLP5bVBRk=.705477f6_
  Repository Commit : 7cdd5b61f956e6cb8459b13a42af363c4440a97b
  Detecting platforms...
  Could not detect any platform in the source directory.
  Error: Could not detect the language from repo.
  ---End of Oryx build logs---
  Oryx was unable to determine the build steps. Continuing assuming the assets in this folder are already built. If this is an unexpected behavior please contact support.
  [WARNING] The function language could not be detected. The language will be defaulted to node.
  Function Runtime Information. OS: linux, Functions Runtime: ~3, node version: 12
  Finished building function app with Oryx
  Zipping Api Artifacts
  Done Zipping Api Artifacts
  Zipping App Artifacts
  Done Zipping App Artifacts
  Uploading build artifacts.
  Finished Upload. Polling on deployment.
  Status: InProgress. Time: 0.1762737(s)
  Status: InProgress. Time: 15.3950401(s)
  Status: Succeeded. Time: 30.5043965(s)
  Deployment Complete :)
  Visit your site at: https://polite-pebble-0dc00000f.1.azurestaticapps.net
  Thanks for using Azure Static Web Apps!
  Exiting
  Cleaning up project directory and file based variables 00:00
  Job succeeded
  

  The deploy step appears to have succeeded, and the frontend is deployed, but there are no Azure Functions showing up in this Static Web App. Is something missed here? So far, the Azure Functions I have are the boiler-plate from instantiating a new Azure Function folder.

  image: node:latest
  
  variables:
    API_TOKEN: $DEPLOYMENT_TOKEN
    APP_PATH: '$CI_PROJECT_DIR/valhalla-client/dist/spa'
    API_PATH: '$CI_PROJECT_DIR/valhalla-api/dist'
  
  stages:
    - install_api
    - build_api
    - install_client
    - build_client
    - deploy
  
  install_api:
    stage: install_api
    script:
      - cd valhalla-api
      - npm ci
    artifacts:
      paths:
        - valhalla-api/node_modules/
    cache:
      key: node
      paths:
        - valhalla-api/node_modules/
    only:
      - master
      
  install_client:
    stage: install_client
    script:
      - cd valhalla-client
      - npm ci
    artifacts:
      paths:
        - valhalla-client/node_modules/
    cache:
      key: node
      paths:
        - valhalla-client/node_modules/
    only:
      - master
  
  build_api:
    stage: build_api
    dependencies:
      - install_api
    script:
      - cd valhalla-api
      - npm install -g azure-functions-core-tools@3 --unsafe-perm true
      - npm run build
    artifacts:
      paths:
        - valhalla-api/dist
    cache:
      key: build_api
      paths:
        - valhalla-api/dist
    only:
      - master
    needs:
      - job: install_api
        artifacts: true
        optional: true
  
  build_client:
    stage: build_client
    dependencies:
      - install_client
    script:
      - cd valhalla-client
      - npm i -g @quasar/cli
      - quasar build
    artifacts:
      paths:
        - valhalla-client/dist/spa
    cache:
      key: build_client
      paths:
        - valhalla-client/dist/spa
    only:
      - master
    needs:
      - job: install_client
        artifacts: true
        optional: true
  
  deploy:
    stage: deploy
    dependencies:
      - build_api
      - build_client
    image: registry.gitlab.com/static-web-apps/azure-static-web-apps-deploy
    script:
      - echo "App deployed successfully."
    only:
      - master
  
• How to global import a stylus file in vite

  Now I'm try use vite to create a vue app. But have trouble to global import a stylus file in vite.config.js.

  I try the code from vite docs.

  export default defineConfig({
    css: {
      preprocessorOptions: {
        styl: {
          additionalData: `@import "./src/assets/styles/common.styl"`
        }
      }
    }
  })
  

  But it's completely not work.

  I got a solution to set global style from github.

  export default defineConfig({
    css: {
      preprocessorOptions: {
        stylus: {
          globals: {
            '$highlight-color': 'red'
          }
        }
      }
    }
  })
  

  It's works fine, But how to import a styl file globaly? I tried to add 'additionalData' to the workable config. However I got bunch of errors: 'failed to locate file'. It seems like try to import the file in every .vue file, but has trouble to locate the file.

    css: {
      preprocessorOptions: {
        stylus: {
          additionalData: `@import "./src/assets/styles/common.styl";`,
          globals: {
            '$color-g1': '#F3F4FC',
            '$color-white': '#FFFFFF',
          }
        }
      }
    }
  

  Have any idea about this?
• Display Data from MYSQL using PHP Dropdown

  I need to display data from the 'Members' table based on the selected 'grad_date' from a drop down. I have been trying to do it for a while now but have struggled to get it to work. Currently I have:

      <body>
  
    <!-- HTML code can reside ABOVE and BELOW the starting and closing PHP tags -->
      Select Grad Date
      <?php
          require_once 'login_name.php'; 
          $db_server = mysqli_connect(...)
          if (!$db_server) die("Unable to connect to MySQL: " . mysqli_error($db_server));
  
          $sql = "SELECT DISTINCT grad_date FROM Members;";
  
          //As we have already connected to the database, execute the query stored in the $sql variable
          $result = mysqli_query($db_server, $sql);
  
          //Check if the query was successfully executed: if the result is NOT FALSE
  
  
          //More advanced logic can also be done based on success or failure
          if($result)
          {
              //Create Drop-Down Menu
              echo "<select name='Members'>";
  
              while($row=mysqli_fetch_assoc($result))
              {
                  //Store each SQL row's column name/value pair in a PHP variable
                  foreach($row as $key=>$value) ${$key}=$value;
  
                  //Load data onto drop-down menu
                  echo "<option value='$grad_date'>$grad_date</option>";
              }
              echo "</select>";
  
          }
  
              ?>
              <table>
                  <thead>
                      <th> member_id </th>
                      <th> member_first_name </th>
                      <th> member_last_name </th>
                      <th> team_id </th>
                  </thead>
                  <tbody>
                  </tbody>
              </table>
    <!-- HTML code can reside ABOVE and BELOW the starting and closing PHP tags -->
      </body>
  

  I have tried a couple different things to go from here but have not found any success. How can I do this?
• create a select box in which data is populated from selecting another select box and it is editable

  I have created two select box. in both, fetching data from database. By selecting first select box the second select box gets auto populated. What I want to do is that this second select box should be editable that is the user can type input also. What I have done now is that used datalist for second select box which is doing the thing, but I want to show the auto populated data as selected option in datalist
• Excel Single Use Dropdownlist

  My problem is the following. I have two tables. The first table is a guest list where the information on who is the guest and how many beds he need is stored. Screenshot And the second table contains the Apartment names and the number of provided beds. Now I want to make a dropdown list in the guest list table where only Beds are shown that provide the right amount of beds. And after a Apartment is selected it cant be picked a second time. Can someone provide me a code for this solution? Thank you very much!
• array.slice strange behaviour with nuxt-edge

  EDIT AND SOLVED: I've found the origin of the problem: I thought arr.slice returned the new array but, actually, it returns the deleted element. See the documentation The solution is simply to put the slice function before the bracket and not in it:

      remove (index) {
        const arrayCopy = this.liens.slice()
        arrayCopy.splice(index, 1)
        this.$emit('update:liens', arrayCopy)
  
      }
  

  Thank you kissu for your time!

  ---

  I was previously using nuxt 2.xx and since switching to nuxt-edge the vue behavior changed with array.slice. Let me explain :

  My code is very basic and is used to add/remove items of an array in a child component "stockLiens". This array is passed to a parent component "currentEtabCommentUser" via .sync

  Everything was working fine before but since I'm with nuxt-edge, if I have - for instance - an array of 3 items and I want to delete the 2nd one, it is the only item left!

  My stockLiens component Javascript is the following:

  props: {
      liens: {
        type: Array,
        default: () => []
      }
  },
  methods: {
      // I used concat() and slice() to avoid mutating a prop in the component
      add () {
        const arrayConcat = this.liens.concat([{ url: '', description: '' }])
        this.$emit('update:liens', arrayConcat)
      },
      remove (index) {
        const arrayCopy = this.liens.slice()
        console.log(this.liens) // line 108
        console.log(arrayCopy) // line 109
        this.$emit('update:liens', arrayCopy.splice(index, 1))
        console.log(arrayCopy) // line 111
      }
  }
  

  When I run the script, the text in the firefox console is the following:

  On the picture, you can see that :

  • stockLiens:108 is an array of 3 items (it makes sense since it is this.liens)
  • stockLiens:109 is an array of 2 items! (strange since it's a simple array.slice() of this.liens) The 2 items are the old index 0 and the old index 2 (I've clicked on old index 1)
  • stockLiens:111 is the same array that on line 109. (strange again because it should have been spliced in line 110)
  • currentEtabCommentUser:186 is an array of 1 item : the old index 1 (since line 186 is just a listener on this.liens, it should be the same array that on stockLiens:111. I really don't understand anything!)

  My currentEtabCommentUsercomponent:

  <stockLiens
     :liens.sync="liens"
  />
  
  <script>
    watch: {
      liens () {
        console.log(this.liens) // line 186
      }
    }
  </script>
  

  I've tried to change .sync, to copy the array with for(i...), to get() / set(v) the liens property, ... I've looked on many forum during hours (2 days now) but I can't understand the problem.

  Can someone help me please ? Thank you in advance!

  My stockLiens component HTML:

  <v-card
     v-for="(url, i) in liens"
    :key="i"
  >
              <v-text-field
                v-model="url.url"
                label="Url"
              />
              <v-text-field
                v-model="url.description"
                label="Description"
              />
            <v-divider vertical />
            <v-btn
              icon
              @click="remove(i)"
            >
              <v-icon>mdi-delete-forever-outline</v-icon>
            </v-btn>
  </v-card>
  
• First load of web icons load very slow

  I have a proyect in Nuxtjs (vuetify), I'm using material design icons, and at the first load time of websites, icons load takes 5/7 seconds to appear: This is the first load

  

  5/7 secondas later:

  

  Why it happens? Maybe if i download icons and put it in assets folder, it will not happens?

  Edit:

  I use icons like this:

  <v-icon color="white">mdi-home</v-icon>
  
• Using Firebase Functions with Nuxt 3

  Environment

  • Operating System: macOS 10.15.7
  • Node Version:v16.14.2
  • Nuxt Version: 3.0.0-rc.2
  • Firebase: 9.7.0
  • firebase-admin: 10.2.0
  • firebase-functions: 3.21.0
  • firebase-functions-test: 0.3.3

  In firebase.json the following config is set:

  {
  "functions": { "source": ".output/server" }
  }
  

  I have a file under the "server" directory containing the following function:

  import * as functions from "firebase-functions";
  
  export const helloWorld = functions.https.onRequest((request, response) => {
      functions.logger.info("Hello logs!", {structuredData: true});
      response.send("Hello from Firebase!");
  });
  

  When I run:

  NITRO_PRESET=firebase npm run build
  firebase emulators:start --only functions
  

  then go to my firebase emulator log, it does not show the new helloWorld() function being initialized. Also, when going to "http://localhost:5001/$PROJECTNAME/us-central1/helloWorld", it returns "Function us-central1-helloWorld does not exist, valid functions are: us-central1-server" which suggests that my function has not been initialized.

  Is there any way I can write firebase cloud functions in my Nuxt 3 app from files in my server directory?

  I saw a similar discussion here that said it was possible to change the nuxt.config.ts functions object between deploying functions,storage,firestore and deploying server and hosting. I am trying to write firebase functions solely in the "server" directory without creating a "functions" directory and the root of my project. Is this possible?

  I have also opened a discussion on GitHub here
• How to edit vuetify text colors (toolbar/navbar)

  I'm using the vuetify admin template and it's an absolute bear to find where the presets for the colors in the template are for text. I managed to change the background of the va-toolbar/nav bar through adding them as color: xxxx in the admin.vue section but I can't seem to find how to change the text colors in these sections. Any advice?
• Does anyone know how to get around Vuex getters not having a cache

  My front end will be connected to great backend later right now it is extremely difficult to test my codes because vuex getters and setters do not cache data. So every time I refresh my page all the functionalities and codes disappear. Does anyone know how I can cache my getters and setters in Vuex?